从零开发一个微信小程序(一)——自定义tabbar

前言

由于我的一位亲戚血糖偏高,为了方便他管理血糖,就做了这么一个管理血糖的小程序;
项目GitHub地址:传送门
小程序在微信小程序中搜索血糖监测即可。

圆规正传,今天我们讲一下如何在小程序中自定义tabbar;

第一步:在项目根目录下新建一个名为custom-tab-bar的文件夹

注意,文件夹的名称必须是custom-tab-bar,不要问我为什么,微信小程序官方的约定就是这样。

如果没有使用云函数的话,就是在根目录下新建这个文件夹;如果使用了云函数就是在miniprogram这个文件夹下新建。

项目的目录一定不能弄错,笔者一开始就没有注意,把这个文件夹放到了components文件夹下,导致自定义tabbar一直出不来。
从零开发一个微信小程序(一)——自定义tabbar_第1张图片

第二步:在该文件夹下新建4个文件,补充对应内容;

因为我这里使用了Vant,所以以下内容都是基于使用了vant的场景。

  • index.json中引入vant相关组件,代码如下:
{
  "component": true,
  "usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  }
}
  • index.wxml中编写如下代码:
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item wx:for="{{ list }}" wx:key="index" icon="{{ item.icon }}">{{
    item.text
    }}van-tabbar-item>
van-tabbar>
  • index.js中编写如下业务逻辑
Component({
  data: {
    active: 2,
    list: [{
        icon: 'records',
        text: '控糖小贴士',
        url: '/pages/knowledge/index'
      },
      {
        icon: 'coupon-o',
        text: '列表',
        url: '/pages/list/index'
      },
      {
        icon: 'add-o',
        text: '记录',
        url: '/pages/add/index'
      },
      {
        icon: 'chart-trending-o',
        text: '图表',
        url: '/pages/chart/index'
      },
      {
        icon: 'fire-o',
        text: '推荐食谱',
        url: '/pages/cookbook/index'
      }
    ]
  },

  methods: {
    onChange(event) {
      this.setData({
        active: event.detail
      });
      wx.switchTab({
        url: this.data.list[event.detail].url
      });
    },

    init() {
      const page = getCurrentPages().pop();
      this.setData({
        active: this.data.list.findIndex(item => item.url === `/${page.route}`)
      });
    }
  }
});

第三步:修改项目的app.json文件,增加自定义tabbar的配置;

配置如下:

"tabBar": {
    "custom": true,
    "list": [{
        "pagePath": "pages/knowledge/index",
        "text": "控糖小贴士"
      },
      {
        "pagePath": "pages/list/index",
        "text": "列表"
      },
      {
        "pagePath": "pages/add/index",
        "text": "记录"
      },
      {
        "pagePath": "pages/chart/index",
        "text": "图表"
      },
      {
        "pagePath": "pages/cookbook/index",
        "text": "推荐食谱"
      }
    ]
  },

最主要的是custome为true这个属性,否则不会展示自定义的tabbar;
list中将几个pagePath都得写好,不然将来wx.switchTab时会报错;有几个页面,及页面的pagePath需要根据实际的需求来写。

第四步:修改每个tab的页面index.js文件中的onShow方法

在onShow方法中增加如下代码:

this.getTabBar().init();

如果不加的话会导致切换tab的时候页面闪烁。

最后,大功告成

最终的效果如图:
从零开发一个微信小程序(一)——自定义tabbar_第2张图片
一个微信小程序自定义tabbar就此完成。

你可能感兴趣的:(微信小程序,微信小程序,小程序)