小程序自定义tab-bar,踩坑记录

从官方下载代码

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

1、把custom-tab-bar 文件放置 pages同级

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

c 复制代码
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({  这部分注销,到其他页进行赋值
    //     selected: data.index
    //   })
    }
  }
})

2、跳转到指定页面时,在当页面JS上加上代码:

c 复制代码
onShow: function () {  //上面注销得部分, 在A-D页面对应上,  A页面=0 ,B=1 以此类推
    if (typeof this.getTabBar === 'function' &&  this.getTabBar()) {
      this.getTabBar().setData({
        selected: 0     //这里的数字设置当前页面在tabbar里对应的序列,从0开始
      })
    }
  }

3、在app.json 开启自定义tab

c 复制代码
  "tabBar": {
    "custom": true,  //开启
    "color": "#767676",
    "selectedColor": "#004F8A",
    "backgroundColor": "#fff",
    "borderStyle": "black",
    "list": [

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

c 复制代码
// app.js
App({
  onLaunch() {
      wx.hideTabBar(); //隐藏原生得tab bar 
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
相关推荐
2501_9159184120 小时前
iOS 开发全流程实战 基于 uni-app 的 iOS 应用开发、打包、测试与上架流程详解
android·ios·小程序·https·uni-app·iphone·webview
黑马源码库miui5208620 小时前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·微信·微信小程序·小程序·uni-app
一口十个小甜虾21 小时前
微信小程序体验版,当打开调试模式正常访问,关闭之后无法访问
微信小程序·小程序
悟空码字21 小时前
微信开放平台第三方平台,可以管理多个微信小程序
微信·小程序·开放平台
じòぴé南冸じょうげん21 小时前
微信小程序如何进行分包处理?
前端·小程序
说私域1 天前
基于开源AI大模型AI智能名片S2B2C商城小程序的参与感构建研究
人工智能·小程序·开源
毕设源码-邱学长2 天前
【开题答辩全过程】以 基于微信小程序的宠物领养系统为例,包含答辩的问题和答案
微信小程序·小程序·宠物
canglingyue2 天前
微信小程序日历事件添加实现
微信小程序·小程序
毕设源码-邱学长2 天前
【开题答辩全过程】以 基于微信小程序校园综合服务平台的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
從南走到北2 天前
JAVA同城打车小程序APP打车顺风车滴滴车跑腿源码微信小程序打车源码
java·开发语言·微信·微信小程序·小程序