自定义微信导航栏

在app.json - window 中开启自定义配置

"navigationStyle" : "custom"

首页的代码:

custom.js

/**
   * 页面的初始数据
   */
  data: {
    bar_Height: wx.getSystemInfoSync().statusBarHeight,
    pos: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * tab选择事件
   */
  tabSelect: function (e) {
    this.setData({
      pos: e.currentTarget.dataset.pos
    })
  },

作者:beatzcs
链接:https://www.jianshu.com/p/8dbadb870382
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

custom.json

{  "enablePullDownRefresh": true}

custom.wxml

<view class='status-bar'>
 <view class='tabar' style='padding-top:{{bar_Height}}px;'>
   <text class='{{pos==0?"active":""}}' bindtap='tabSelect' data-pos='0'>推荐</text>
   <text class='{{pos==1?"active":""}}' bindtap='tabSelect' data-pos='1'>热门</text>
 </view>
</view>

custom.wxss

.status-bar {  
    width: 100%;  background-color: #fdd901;
}
.tabar {  
    display: flex;  justify-content: center;
}
.tabar text {  
    padding: 25rpx 30rpx;  color: #353535;  font-size: 12pt;
}
.tabar .active {  
    color: #fff;
}

个人中心代码:

mine.js

/**
  * 页面的初始数据
  */
 data: {   
      bar_Height: wx.getSystemInfoSync().statusBarHeight
 },

mine.wxml

<view class='tabar' style='top:{{bar_Height}}px;'>
 <view>个人中心</view>
</view>

mine.wxss

.tabar {  
     width: 100%;  
     box-sizing: border-box;  
     position: fixed;  
     text-align: center;  
     font-size: 12pt;  
     color: #fff;  
     background-color: #6cbc72;
}
.tabar view {  
     padding: 25rpx 0rpx;
}

虽然自定义效果还不错,但是要注意进行微信版本的兼容问题,window.navigationStyle 只能支持 6.6.0 以上微信版本,对应基础库版本为 1.9.1。如果需要针对低版本微信进行兼容,要做好兼容性适配。

感觉有一点不好的地方是,一旦开启了自定义,每个页面都要用自定义的导航栏,这就很无奈。比较适合页面数量较少的小程序中,页面较多最好使用<template>进行统一的顶部布局。

原文发布于微信公众号 - 前端黑板报(FeHeiBanBao)

原文发表时间:2018-11-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券