微信小程序自定义导航

本文由清尘发表于2020-01-06 15:12属于移动前端分类

navigationStyle 配置自定义导航: 官方文档

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项

全局配置在app.json里配置

"window":{
  "navigationStyle": "custom"
},

只针对某一个小程序页面自定义导航,配置对应页面的x.json文件 (页面配置中只能设置 app.json 中 window 对应的配置项,以决定本页面的窗口表现,所以无需写 window 这个属性)

{
     "navigationStyle":"custom"
}

自行布局一个导航栏

<view class="diy_headerbar" style="height: {{navHeight}}px;">
    <view wx:if="{{pg_len!==1}}" class="goback" catchtap="goBack">
      <image src="../../asset/back.png" class="backico" />
    </view>
   <text class="h_title">{{cat_name}}</text>
</view>
/* 自定义导航 */
.diy_headerbar{ background-color: #dd2727; position: fixed; z-index: 10; width: 100%;}
.diy_headerbar .h_title{position: absolute; text-align: center; color: #fff; width: 100%; font-size: 36rpx; bottom: 0; height: 45px; line-height: 45px;}
.goback{position: absolute; left: 5rpx; width: 48rpx; height: 48rpx; bottom: 0px; padding:10px 8px; z-index: 55;}
.backico{width: 48rpx; height: 48rpx;}

在data里定义 navHeight=0,pg_len:0

在onLoad里获取手机状态栏高度

    wx.getSystemInfo({
      success:res=>{
        //导航高度
        this.setData({
          navHeight:res.statusBarHeight + 46
        })
      },
      fail(err){
        console.log(err);
      }
    })

pg_len是用来判断分享单页进入时隐藏返回按钮

  onShow: function () {
    // 页面显示
    var that = this;
    try{
      var pages = getCurrentPages();
      var pg_len = pages.length;
      that.setData({
        pg_len: pg_len
      });  
    }catch(e){

    }
  },

返回上一页函数:

  goBack:function(){
    wx.navigateBack({
      delta:1
    })
  }