快捷導(dǎo)航

小程序自定義tab-bar踩坑實(shí)戰(zhàn)記錄

更新時(shí)間：2024年12月18日 09:18:15 作者：賴賴賴先生

這篇文章主要給大家介紹了關(guān)于小程序自定義tab-bar踩坑實(shí)戰(zhàn)的相關(guān)資料,包括下載代碼、放置文件、修改JS文件、配置app.json和隱藏原生導(dǎo)航欄等步驟,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

從官方下載代碼
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

1、把custom-tab-bar 文件放置 pages同級(jí)

修改下 custom-tab-bar 下的 JS文件

Component({
  data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "#3cc51f",
    list: [{
      pagePath: "/pages/index/index",
      iconPath: "/static/images/ico/home.png",
      selectedIconPath: "/static/images/ico/home.png",
      text: "A"
    }, {
      pagePath: "/pages/product/product",
      iconPath: "/static/images/ico/home.png",
      selectedIconPath: "/static/images/ico/home.png",
      text: "B"
    },
    {
        pagePath: "/pages/news/news",
        iconPath: "/static/images/ico/home.png",
        selectedIconPath: "/static/images/ico/home.png",
        text: "C"
      },
      {
        pagePath: "/pages/my/my",
        iconPath: "/static/images/ico/home.png",
        selectedIconPath: "/static/images/ico/home.png",
        text: "D"
      },
]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      const url = data.path
      wx.switchTab({url})
    //   this.setData({  這部分注銷，到其他頁(yè)進(jìn)行賦值
    //     selected: data.index
    //   })
    }
  }
})

2、跳轉(zhuǎn)到指定頁(yè)面時(shí)，在當(dāng)頁(yè)面JS上加上代碼：

onShow: function () {  //上面注銷得部分， 在A-D頁(yè)面對(duì)應(yīng)上，  A頁(yè)面=0 ，B=1 以此類推
    if (typeof this.getTabBar === 'function' &&  this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0     //這里的數(shù)字設(shè)置當(dāng)前頁(yè)面在tabbar里對(duì)應(yīng)的序列，從0開(kāi)始
      })
    }
  }

3、在app.json 開(kāi)啟自定義tab

  "tabBar": {
    "custom": true,  //開(kāi)啟
    "color": "#767676",
    "selectedColor": "#004F8A",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [

4、在app.js 隱藏原生得JS

// app.js
App({
  onLaunch() {
      wx.hideTabBar(); //隱藏原生得tab bar 
    // 展示本地存儲(chǔ)能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

總結(jié)

到此這篇關(guān)于小程序自定義tab-bar踩坑實(shí)戰(zhàn)的文章就介紹到這了,更多相關(guān)小程序自定義tab-bar內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: