微信小程序自定义tabBar+vant-weapp tabBar

最新推荐文章于 2024-07-19 09:47:39 发布

R·ZORO

最新推荐文章于 2024-07-19 09:47:39 发布

阅读量403

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序 javascript

本文链接：https://blog.csdn.net/qq_46029887/article/details/130747052

版权

微信小程序专栏收录该内容

18 篇文章 0 订阅

订阅专栏

本文介绍了如何在微信小程序中配置自定义tabBar，包括在app.json中设置custom字段并配置list，以及在各页面的json中声明usingComponents。接着，文章演示了引入vant-weapp的Tabbar组件，展示了WXML代码基础用法，并使用MobX进行状态管理，监听和更新数据。此外，还提供了变更tab时的处理方法和示例效果图。

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

1. 配置信息

在 app.json 中的 tabBar 项指定 custom 字段设置为true，同时其余 tabBar 相关配置也补充完整。
所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

  "tabBar": {
    "custom": true,
    "list": [{
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "images/首页-置灰.png",
        "selectedIconPath": "images/首页-active.png"
      },
      {
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "images/消息-置灰.png",
        "selectedIconPath": "images/消息-active.png"
      },
      {
        "pagePath": "pages/contact/contact",
        "text": "个人中心",
        "iconPath": "images/个人中心-置灰.png",
        "selectedIconPath": "images/个人中心-active.png"
      }
    ]
  },

2. 添加 tabBar 代码文件

3.引入vant-weapp Tabbar 标签栏

在app.json或index.json中引入组件

"usingComponents": {
  "van-tabbar": "@vant/weapp/tabbar/index",
  "van-tabbar-item": "@vant/weapp/tabbar-item/index"
}

基础用法
wxml：

<van-tabbar active="{{active}}" bind:change="onChange">
  <van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info ? item.info:''}}">
    <image slot="icon" src="{{item.iconPath}}" mode="aspectFit" style="width: 30px; height: 18px;" />
    <image slot="icon-active" src="{{item.selectedIconPath}}" mode="aspectFit" style="width: 30px; height: 18px;" />
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

js：

import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../store/store'
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: { info: 'info',active:'activeTabBarIndex' },
    actions: { updateActive: 'updateActiveTabBarIndex' }
  },
  observers: {
    "info": function (val) {
      this.setData({
        "list[1].info": val
      })
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    "list": [{
      "pagePath": "/pages/home/home",
      "text": "首页",
      "iconPath": "/images/首页-置灰.png",
      "selectedIconPath": "/images/首页-active.png"
    },
    {
      "pagePath": "/pages/message/message",
      "text": "消息",
      "iconPath": "/images/消息-置灰.png",
      "selectedIconPath": "/images/消息-active.png",
      info: 0
    },
    {
      "pagePath": "/pages/contact/contact",
      "text": "个人中心",
      "iconPath": "/images/个人中心-置灰.png",
      "selectedIconPath": "/images/个人中心-active.png"
    }
    ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      // this.setData({ active: event.detail });
      this.updateActive(event.detail)
      wx.switchTab({
        url: this.data.list[event.detail].pagePath,
      })
    }
  }
})

详细参考链接: Tabbar 标签栏-Vant Weapp

store.js

import { observable, action } from 'mobx-miniprogram';
export const store = observable({
  //数据
  //numA: 0,
  //numB: 10,
  activeTabBarIndex: 0,//选中的tabbar
  info:1,//消息数量
  //计算属性
  get sum() {
    return this.numA + this.numB
  },
  //修改数据函数
  //updateNumA: action(function (step) {
  //  this.numA += step
  //}),
  updateActiveTabBarIndex: action(function (index) {
    this.activeTabBarIndex = index
  })
})