微信小程序自定义tabbar（官方custom-tab-bar）

最新推荐文章于 2024-09-02 12:25:42 发布

℡思念如雨

最新推荐文章于 2024-09-02 12:25:42 发布

阅读量4.6k

点赞数 4

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48887108/article/details/115716044

版权

本文介绍了如何在微信小程序中实现自定义tabbar，包括修改app.json配置，创建custom-tab-bar文件夹，编写index.wxml、index.js和index.wxss，并解决了页面刷新导致tabindex重置的问题。

摘要由CSDN通过智能技术生成

首先我们先看一下具体功能

一、修改 app.json 文件，将 tabBar修改为自定义tab，list 保持不变，最多5个

 "tabBar": {
    "custom": true,
    "list": [{
      "pagePath": "pages/main-HY/index",
      "text": "货源",
      "iconPath": "/images/tabbar/货源icon48＊48@2x.png",
      "selectedIconPath": "/images/tabbar/货源icon@2x.png"
    },
    {
      "pagePath": "pages/main-SXY/index",
      "text": "商学院",
      "iconPath": "/images/tabbar/商学院icon@2x.png",
      "selectedIconPath": "/images/tabbar/商学院icon48＊48@2x.png"
    },
    {
      "pagePath":  "pages/main-DZZX/index",
      "text": "店主中心",
      "iconPath": "/images/tabbar/店主中心icon@2x.png",
      "selectedIconPath": "/images/tabbar/店主中心icon48＊48@2x.png"
    }]
  },

二、在项目的根目录新建 custom-tab-bar，这个文件就是微信已经帮我们定义好了，只需要新增文件，就可以微信自动读取