微信小程序——底部導(dǎo)航tabBar

一.最簡單的底部導(dǎo)航

在全局配置 app.json 中添加韭寸，所有小程序的頁面都會顯示出來
示例：

{
  ......
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath":"",
        "text": "首頁"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath":"",
        "text": "日志"
      }
    ]
  },
 ......

list：
pagePath : 頁面路徑 （注意：在list中有的路徑指向的頁面，如果你想添加一個navigator也跳轉(zhuǎn)到這個頁面，那么跳轉(zhuǎn)方式ope-type只能用switchTab !!）
text : icon下面顯示的文字
自定義tabBar（修改tabBar的整體樣式，如改變tabBar的顏色等）請參考https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

二 . 自定義底部導(dǎo)航

前面最簡單的底部導(dǎo)航有很多情況下不能使用，比如：想要使用svg和字體圖標(biāo) ，比如想要的底部菜單欄個數(shù)多于5個（一般情況下小于等于5個，我說的是有兩個端入口的情況，比如教師端和學(xué)生端）
自定義導(dǎo)航有兩種方式：將導(dǎo)航作為組件和將頁面作為組件
還不會自定義組件的小伙伴看這里：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

（1）將導(dǎo)航作為組件

缺點：會導(dǎo)致頁面第一次進(jìn)入的時候切換會導(dǎo)致有頁面閃爍缓屠，這個閃爍其實就是url跳轉(zhuǎn)滨溉。
這里代碼就不放了，因為這個缺點實在是我無法容忍的伐脖，大家有需要的話蠕啄，可以去查“自定義tabBar”,總會找到的。

（2）將頁面作為組件

缺點：暫時還不知道
效果如下：

aa.gif

大致原理就是在主頁面上寫底部菜單代碼哈街，通過綁定這些菜單按鈕來更改當(dāng)前頁面
主頁面代碼如下index.wxml

<!-- 底部切換菜單 -->
<view class="tab-bar">
  <block wx:for="{{tabBar}}" wx:for-item="item" wx:key="index">
    <view class="tab-item {{index==nowIndex?'active':''}}" bindtap="{{item.tapFunction}}">
        <view class="{{item.iconClass}} icons"></view>
        <text class="icon-text">{{item.text}}</text>
    </view>
  </block>
</view>
<!-- 頁面容器 -->
<view class="container">
  <firstPage wx:if="{{nowPage=='firstPage'}}"></firstPage>
  <secondPage wx:if="{{nowPage=='secondPage'}}"></secondPage>
</view>

index.js

const app = getApp()

Page({
  data: {
    nowPage:"firstPage",
    nowIndex:0,
    tabBar:[
      {
        "iconClass":"iconfont icon-shouye",
        "text":"第一頁",
        "tapFunction":"toFirst",
        "active":"active"
      },
      {
        "iconClass":"iconfont icon-wode",
        "text":"第二頁",
        "tapFunction": "toSecond",
        "active": ""
      }
    ]
  },
  onLoad: function () {
    
  },
  toFirst(){
    this.setData({
      nowPage:"firstPage",
      nowIndex: 0
    })
  },
  toSecond() {
    this.setData({
      nowPage: "secondPage",
      nowIndex: 1
    })
  }
})

引入組件的index.json

{
  "usingComponents":{
    "firstPage":"/component/component-firstPage/component-firstPage",
    "secondPage":"/component/component-secondPage/component-secondPage"
  }
}

具體代碼請在我的github上查看——https://github.com/BigJJing/wechat-tabBar_component/tree/master

最后編輯于：2019.01.16 14:51:08

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者