【愚公系列】2022年11月 微信小程序-Vant实现自定义tabBar

文章目录

• 前言
• 一、Vant实现自定义tabBar
  • 1.app.js配置
  • 2.全局数据共享
  • 3.custom-tab-bar组件

---

前言

小程序自定义tabBar官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

1、说明

小程序自定义tabBar两种方式：一种采用官方自定义tabbar的方式，但是官方的自定义tabbar实际上也存在不少bug，比如某些情况下真机显示了两层。一种完全自己去实现，其实就是用fixed定位写一个，但是在页面切换的时候会有闪动的问题，因为不同的页面都要引入自定义tabbar这个组件，微信小程序里不同页面的组件并不会完全共用。

2、配置使用

官方自定义tabbar配置方式：在app.json中的tabBar字段里配置custom字段值为true，在代码根目录添加custom-tab-bar组件文件。

一、Vant实现自定义tabBar

1.app.js配置

代码语言：javascript复制

"tabBar": {
  "custom": true,
},

2.全局数据共享

代码语言：javascript复制

// 在这个 JS 文件中，专门来创建 Store 的实例对象
import { observable, action } from 'mobx-miniprogram'

export const store = observable({
  activeTabBarIndex: 0,
  updateActiveTabBarIndex: action(function(index) {
    this.activeTabBarIndex = index
  })
})

3.custom-tab-bar组件

代码语言：javascript复制

// custom-tab-bar/index.js
import { storeBindingsBehavior } from 'mobx-miniprogram-bindings'
import { store } from '../store/store'

Component({
  options: {
    styleIsolation: 'shared'
  },
  behaviors: [storeBindingsBehavior],
  storeBindings: {
    store,
    fields: {
      sum: 'sum',
      active: 'activeTabBarIndex'
    },
    actions: {
      updateActive: 'updateActiveTabBarIndex'
    },
  },
  observers: {
    'sum': function (val) {
      this.setData({
        'list[1].info': val
      })
    }
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    "list": [
      {
        "pagePath": "/pages/home/home",
        "text": "首页",
        "iconPath": "/images/tabs/home.png",
        "selectedIconPath": "/images/tabs/home-active.png"
      },
      {
        "pagePath": "/pages/message/message",
        "text": "消息",
        "iconPath": "/images/tabs/message.png",
        "selectedIconPath": "/images/tabs/message-active.png",
        info: 0
      },
      {
        "pagePath": "/pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/images/tabs/contact.png",
        "selectedIconPath": "/images/tabs/contact-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,
      })
    },
  }
})

代码语言：javascript复制

<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{active}}" bind:change="onChange" active-color="#13A7A0">
	<van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info ? item.info : ''}}">
		<image slot="icon" src="{{item.iconPath}}" mode="aspectFit" style="width: 25px; height: 25px;" />
		<image slot="icon-active" src="{{item.selectedIconPath}}" mode="aspectFit" style="width: 25px; height: 25px;" />
		{{item.text}}
	</van-tabbar-item>
</van-tabbar>

javascript 小程序 微信

0 人点赞