微信小程序引入vant封装tabbar

冷不防 2022-10-12 01:41 195阅读 0赞

1、先创建一个custom-tab-bar文件夹，然后在微信开发者工具里面找到该文件夹，点击右键新建一个component；
在这里插入图片描述
2、custom-tab-bar/index.wxml

  1. <van-tabbar active="{
  2.    { active }}" active-color="#DB7093" inactive-color="#DCDCDC" bind:change="onChange">
  3.   <van-tabbar-item wx:for="{
  4.    {list}}" wx:key="index" icon="{
  5.    {item.icon}}">{
  6.    {item.text}}</van-tabbar-item>
  7. </van-tabbar>

3、custom-tab-bar/index.js

  1. Component({
  2.   /**
  3.    * 组件的属性列表
  4.    */
  5.   properties: {
  7.   },
  9.   /**
  10.    * 组件的初始数据
  11.    */
  12.   data: {
  13.     active : 0,
  14.     list: [
  15.       {
  16.         pagePath: "/pages/home/home",
  17.         text: "首页",
  18.         icon: 'wap-home',
  19.       },
  20.       {
  21.         pagePath: "/pages/collect/collect",
  22.         text: "收藏",
  23.         icon: 'like',
  24.       },
  25.       {
  26.         pagePath: "/pages/notice/notice",
  27.         text: "通知",
  28.         icon: 'invition',
  29.       },
  30.       {
  31.         pagePath: "/pages/user/user",
  32.         text: "我的",
  33.         icon: 'friends',
  34.       }
  35.     ]
  36.   },
  38.   /**
  39.    * 组件的方法列表
  40.    */
  41.   methods: {
  42.     onChange(e) {
  43.       // console.log(e.detail);
  44.       let index = e.detail;
  45.       wx.switchTab({
  46.         url: this.data.list[index].pagePath
  47.       })
  48.     }
  49.   }
  50. })

4、app.json

  1. "tabBar": {
  2.     "custom": true,
  3.     "list": [
  4.       {
  5.         "pagePath": "pages/home/home",
  6.         "text": "首页"
  7.       },
  8.       {
  9.         "pagePath": "pages/collect/collect",
  10.         "text": "收藏"
  11.       },
  12.       {
  13.         "pagePath": "pages/notice/notice",
  14.         "text": "通知"
  15.       },
  16.       {
  17.         "pagePath": "pages/user/user",
  18.         "text": "我的"
  19.       }
  20.     ]
  21.   },

5、在每个tabbar页面的onLoad加上this.getTabBar().setData({ active : tabbar的下标 })

  1. onLoad: function (options) {
  2.     this.getTabBar().setData({
  3.       active : 0
  4.     })
  5.   },

发表评论

表情：
评论列表 （有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

    相关 微信小程序自定义 tabbar

    一定的需求情况下，无法使用小程序原生的 `tabbar` 的时候，需要自行实现一个和 `tabbar` 功能一模一样的自制组件。 查阅了海量的博客和文档之后，亲自踩坑。总结了

    怼烎@怼烎@/ 0 赞/ 642 阅读