小程序自定义导航栏仿原生固定在顶部

一、自定义导航栏组件

二、设置导航栏固定样式 :

此时，页面主体内容头部会有一部分被导航栏遮住在底下 ，这是因为position定位不占瀑布流空间，为解决这个问题，可以给自定义导航栏加空一个高度等于导航栏的view，以此给导航栏在页面中占位，且高度等于导航栏高度

topHeight = wxdbstatusBarHeight + wxdbnavBarHeight

完美解决！！！小程序仿原生自定义导航栏

width:胶囊的宽度；

height：胶囊的高度

top:胶囊距离顶部的距离

整体高度：

状态栏高度+胶囊高度+(胶囊距离-胶囊高度）2

在json文件中定义custom，自定义导航栏样式

拿到相应的导航栏信息

自定义导航栏的样式，设置fixed布局

1、首先打开微信开发工具，载入需要修改的小程序工程。

2、然后打开appjson页面，在window下写下面的代码，先用color和selectedColor设置底部菜单点击前和点击后文字的颜色。

3、然后在list中设置两个标签，其中使用pagePath和text填写一下点击跳转的路径和选项的名字。

4、最后填写点击前的图标和点击后的图标，这里每个选项用两个颜色图标，可以去找矢量图，尺寸大约在64像素左右，其中iconPath为点击前的图标，而selectedIconPath为点击后的图标。

5、最后设置好后，在左侧的预览就可以看到菜单的样式了：

1、在小程序的appjson文件中，设置导航栏的背景颜色和文字颜色，以及标题文字内容。在小程序的页面中，使用微信提供的地图API获取用户位置信息，并将其显示在页面上

2、使用第三方天气API获取当前用户所在位置的天气信息，并将其显示在页面上。将获取到的地址和天气信息，通过setData方法传递给导航栏的标题，以及页面中需要显示的位置。

效果图

wxml页面

<!-- nav导航 -->

<view class="goods">

  <block wx:for="{{tab}}" wx:key="key">

    <view class="{{itemstyle}}" bindtap="tarClick" data-index="{{index}}">{{itemtitcle}}</view>

  </block>

</view>

<!--导航下  视图滑块 -->

<swiper bind:change="changeTab" current="{{index}}">

   <block>

     <swiper-item>

     <text>11111</text>

     </swiper-item>

     <swiper-item>

     <text>2222</text>

     </swiper-item>

     <swiper-item>

     <text>3333</text>

     </swiper-item>

   </block>

</swiper>

js页面

Page({

    data: {

       tab:[

         {titcle:"商品参数",style:"color"}, 

         {titcle:"商品介绍",style:""},

         {titcle:"商品规格",style:""},

        ],

        index:0,

       goods:''

    },

       tarClick(e){

          //  consolelog(ecurrentTargetdatasetindex)

           let tab = thisdatatab;

          let that = this;

          let index = ecurrentTargetdatasetindex

           consolelog(index)

          tabmap((item,key)=>{

           if(key==index)

           {

              tab[key]['style']='color';

           }else{

             tab[key]['style']='';

           }

          })

          thatsetData({tab,index})

       },changeTab(e){

          consolelog(edetailcurrent)

          let tab = thisdatatab;

          let that = this;

          let index = edetailcurrent

           consolelog(index)

          tabmap((item,key)=>{

           if(key==index)

           {

              tab[key]['style']='color';

           }else{

             tab[key]['style']='';

           }

          })

          thatsetData({tab,index})

       },

}）

wxss页面

/ pages/details/detailswxss /

goods{

    width: 100%;

    height: 100rpx;

    / background-color:yellowgreen; /

    display:flex;

    justify-content: space-around;

    align-items: center;

}

goods view{

    width: 160rpx;

    height: 100rpx;

    display: flex;

    justify-content: center;

    align-items: center;

}

color{

    color: red;

    border-bottom: 2px solid red;

}

微信小程序在手机上点击跳转闪退的原因，由于服务器端环境产生了变化，小程序里调用跳转接口时，微信页面一闪而过，后面把生成小程序跳转代码修改正确就行。或是这个API只是调起了客户端扫码界面，扫码成功后返回对应的结果微信小程序中并没有提供打开链接的API。

以上就是关于小程序自定义导航栏仿原生固定在顶部全部的内容，包括:小程序自定义导航栏仿原生固定在顶部、微信小程序实现自定义头部导航栏（详细）、微信小程序开发，导航栏右边的按钮怎么设置等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！