微信小程序之通用顶部导航栏

为什么需要自定义顶部导航栏

1. 自定义左上角图标
2. 自定义返回途径
3. 节省页面空间，部分页面可以不需要顶部导航
4. 总之就是各种灵活控制...

去掉原生的顶部导航

1. 在app.json文件中设置

   "navigationStyle": "custom"
复制代码

2. 增加默认顶部导航自定义组件

    "usingComponents": {
    "navHead": "/compoent/navHead/index"
  }
复制代码

不废话直接上代码

1. js文件

var app=getApp();
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    title: {
      type:String,
      value:''
    },
    showhome:{
      type:Boolean,
      value:false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    title: "",//标题
    showLeft: false,//是否显示返回按钮
    ishomepage:false,//当前页是否首页
    currentPagePath:''//当前页路径
  },

  ready: function () {
    var pages = getCurrentPages(); //所有页面栈
    var currentpagepath=pages[pages.length-1].route;
    var ishomepage=currentpagepath=='pages/index/index';
    this.setData({ showLeft: pages.length > 1, title: this.data.title,ishomepage:ishomepage,currentPagePath:currentpagepath })
  },
  /**
   * 组件的方法列表
   */
  methods: {
    /**重新加载到首页，清空浏览痕迹 */
    reLaunchHome: function (e) {
      let formid = e.detail.formId;
      wx.request({
        url: app.globalData.host + '/api/miniprogram/AddFormId',
        data: {
          uid: app.globalData.userInfo.Uid,
          formId: escape(formid)
        }
      })
      wx.reLaunch({
        url: "/pages/index/index",
      })
    },
    /**回退 */
    navigateBack: function (e) {
      let formid = e.detail.formId;
      wx.request({
        url: app.globalData.host + '/api/miniprogram/AddFormId',
        data: {
          uid: app.globalData.userInfo.Uid,
          formId: escape(formid)
        }
      })
      wx.navigateBack({
        delta: 1,
      })
    }
  }
})

复制代码

2. wxml文件

<view class='navigation'>
  <view wx:if="{{showLeft}}" class='navleft'>
  <form bindsubmit='navigateBack' report-submit='true'>
  <button form-type='submit' class="tabButton" >
    <image src='/images/navback.png'></image></button></form>
  </view>
  <view wx:if="{{!showLeft&&showhome}}" class='navleft'>
  <form bindsubmit='reLaunchHome' report-submit='true'>
  <button form-type='submit' class="tabButton" >
    <image src='/images/navback.png'></image></button></form>
  </view>
  
  <view class='navtitle'>
    <text>{{title}}</text>
  </view>
</view>
复制代码

3. wxss文件

.navigation {
  height: 130rpx;
  width: 750rpx;
  overflow: hidden;
  background-color: #fff;
  position: fixed;
  top: 0;
  z-index: 999;
  font-size: 32rpx;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}
.navleft{
  width: 75px;
  height: 70px;
  position: absolute;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.navigation image {
  width: 40rpx;
  height: 40rpx;
  /* padding-left: 30rpx;
  padding-top: 50rpx;
  position: absolute; */
}

.navtitle{
  width: 100%;
  height: 70px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color:#000;
}
.navtitle text{
   padding-top: 40rpx;
}

.tabButton{
  background-color: #fff;
  position:  inherit;
  display:  inline-flex;
  padding: 0;
  margin-left: 15px;
  margin-top: 25px;
}
.tabButton::after{
  border: none
}
复制代码

转载于:https://juejin.im/post/5c08ea316fb9a049ab0d69a6