【小程序开发】基于Vant的tabBar案例_vant tabbar

1.案例效果

sum=4，消息小红点显示为sum值

2.知识点

 3.实现步骤

基础能力 / 自定义 tabBar (qq.com)

4.实现代码

基于本地生活项目【小程序开发】实现本地生活项目-CSDN博客

4.1 实现tabBar数字徽标

效果：

过程：

list内容不删：

为了保证低版本兼容以及区分哪些页面是 tab 页，tabBar 的相关配置项需完整声明，但这些字段不会作用于自定义 tabBar 的渲染。

app.json添加 "custom": true

{
  "tabBar": {
    "custom": true,
"list": [{
xxx
}],
xxx
}

新建文件夹custom-tab-bar，新建组件index

配置npm 【小程序开发】npm包-CSDN博客 2Vant-Weapp

使用Vant Weapp内置TabBar组件：Tabbar 标签栏 - Vant Weapp (gitee.io)

 导入引入、基础语法、自定义图标代码

在徽标布局上，希望将文字和图片间距margin设置为0

点击图标：

在自定义组件中使用 Vant Weapp 组件时，需开启styleIsolation: 'shared'选项

代码：

app.json增加：

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

index.js

Component({
options:{
  styleIsolation:'shared'
},
  data: {
    active: 0,
    "list": [{
      "pagePath": "pages/home/home",
      "text": "首页",
      "iconPath": "/images/008_咖啡.png",
      "selectedIconPath": "/images/008_奶茶奶盖.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/008_披萨西餐.png",
      "selectedIconPath": "/images/008_汉堡快餐.png",
      info:2
    },
    {
      "pagePath": "pages/contact/contact",
      "text": "联系",
      "iconPath": "/images/008_火锅.png",
      "selectedIconPath": "/images/008_米粉面条.png"
    }
    ]
  },
  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      this.setData({ active: event.detail });
    },
  }
})

index.wxml

<van-tabbar active="{{ active }}" bind:change="onChange">
<!-- info=3，徽标=3,info=0或''不会被渲染成徽标 -->
  <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: 25px;"
    />
    <image
      slot="icon-active"
      src="{{item.selectedIconPath}}"
      mode="aspectFit"
      style="width: 30px; height: 25px;"
    />
    {{item.text}}
  </van-tabbar-item>
</van-tabbar>

4.2 数字徽标值与组件的数值绑定

【小程序开发】全局数据共享-CSDN博客

引入store.js和numbers组件

index.js(配置tabBar)新增：

import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
import { store } from "../store/store";
Component({
  behaviors:[storeBindingsBehavior],
  storeBindings:{
    store,
    fields:{
      sum:'sum',
    },
  },
//与list数组中的info数据绑定
  observers:{
    'sum':function (val) {
      this.setData({
        'list[1].info':val
      })
    }
xxx
  },

home.wxml

<my-numbers></my-numbers>

效果：

 

4.3 实现tabBar页面的切换效果

思路：

在index.wxml中有bind:change="onChange"监听tabBar变化

在index.js中：

onChange(event) {
      // event.detail 的值为当前选中项的索引
      this.setData({ active: event.detail });
    },

利用索引拿到相应页面路径（以'/'开头）

利用

wx.switchTab({

  url: 'url',

})即可完成跳转

CODE

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

问题：在测试中发现选中tabBar需连点两次才有选中效果

解决办法：active进行公共存储

CODE

store.js新增

// 通过es6导出语法 导出store实例对象
export const store=observable({
activeTabBarIndex:0
xxx
// updateActiveTabBarIndex指向一个方法
updateActiveTabBarIndex:action(function (index) {
  this.activeTabBarIndex=index
})
})

index.js新增

 storeBindings:{
     xxx
    fields:{
      xxx
      active:'activeTabBarIndex'
    },
    // 映射方法
    actions:{
      updateActive:'updateActiveTabBarIndex'
    }
  },

methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      // this.setData({active:event.detail})不需要，更改active值要通过store的方法改
      this.updateActive(event.detail),
      xxx
    },
  }