微信小程序自定义tabbar

微信小程序自定义tabbar

1. 安装mobx,实现全局数据共享

npm i --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

2. app.json中配置tabbar, 并引入vant组件

{
  "usingComponents":{
    "van-button": "@vant/weapp/button/index",
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index"
  },
  "tabBar": {
    "custom": true,
    "list": [{
      "pagePath": "pages/home/index",
      "text": "首页",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home_sel.png"
    },{
      "pagePath": "pages/message/index",
      "text": "消息",
      "iconPath": "/images/msg.png",
      "selectedIconPath": "/images/msg_sel.png"
    },
    {
      "pagePath": "pages/list/index",
      "text": "列表",
      "iconPath": "/images/list.png",
      "selectedIconPath": "/images/list_sel.png"
    },
    {
      "pagePath": "pages/my/index",
      "text": "我的",
      "iconPath": "/images/my.png",
      "selectedIconPath": "/images/my_sel.png"
    }]
  },
}

3. 创建custom-tab-bar

1. 在项目根目录下创建custom-tab-bar文件夹
2. 在custom-tab-bar文件夹下创建index.wxml、index.wxss、index.js、index.json

• custom-tab-bar\index.wxml

<van-tabbar active="{{ active }}" bind:change="onChange" active-color="#00ff00" inactive-color="#ccc">
   <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>

• custom-tab-bar\index.js

// 导入
import { storeBindingsBehavior } from "mobx-miniprogram-bindings";
import { store } from "../store/store";

Component({
	// 挂载
	behaviors: [storeBindingsBehavior],
	// 全局数据操作
	storeBindings: {
		store,
		fields: {
			msg: "msg",
			active: "activeTabBarIndex",
		},
		actions: {
			updateActive: "updateActiveTabBarIndex",
		},
	},

	// 数据监听
	observers: {
		msg: function (value) {
			this.setData({
				"list[1].info": value,
			});
		},
	},

	options: {
		styleIsolation: "shared",
	},
	data: {
		active: 0,
		list: [
			{
      "pagePath": "pages/home/index",
      "text": "首页",
      "iconPath": "/images/home.png",
      "selectedIconPath": "/images/home_sel.png"
    },{
      "pagePath": "pages/message/index",
      "text": "消息",
      "iconPath": "/images/msg.png",
      "selectedIconPath": "/images/msg_sel.png",
      "info": 1
    },
    {
      "pagePath": "pages/list/index",
      "text": "列表",
      "iconPath": "/images/list.png",
      "selectedIconPath": "/images/list_sel.png"
    },
    {
      "pagePath": "pages/my/index",
      "text": "我的",
      "iconPath": "/images/my.png",
      "selectedIconPath": "/images/my_sel.png"
    }
		],
	},

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

• custom-tab-bar\index.json

{
	"component": true
}

• custom-tab-bar\index.wxss

.van-tabbar-item {
	--tabbar-item-margin-bottom: 0;
}

4. 创建store

在项目根目录下创建store文件夹, 然后在store下创建store.js文件

• store\store.js

import { observable, action } from "mobx-miniprogram";

export const store = observable({
	// 消息数量
	msg: 1,
	// 选中的tabbar
	activeTabBarIndex: 0,

	// 计算属性：用get定义，（只读不能修改）
	get msg_sum() {
		return this.msg;
	},
	// action方法：用来修改store中的值
	updateMsg: action(function (step) {
		this.msg += step;
	}),

	updateActiveTabBarIndex: action(function (index) {
		this.activeTabBarIndex = index;
	}),
});

5. 测试

• home\index.js

import { createStoreBindings } from "mobx-miniprogram-bindings";
import { store } from "../../store/store.js";

Page({
	// 点击事件
	addCount(e) {
		this.updateMsg(e.target.dataset.addstep);
	},
	onLoad: function () {
		this.storeBindings = createStoreBindings(this, {
			store,
			fields: ["msg", "msg_sum"], // 将哪些字段绑定到此页面中进行使用
			actions: ["updateMsg"], // 将哪些方法绑定到此页面中
		});
	},
	onUnload: function () {
		this.storeBindings.destroyStoreBingds();
	},
});

• home\index.wxml

<!--index.wxml-->
<navigation-bar title="首页" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<scroll-view class="scrollarea" scroll-y type="list">
  <view class="container">
    <!-- 获取 store 中共享数据 -->
    <view>{{msg}}  获取消息数:{{msg_sum}}</view>
    <button bindtap="addCount" data-addStep='{{1}}'>msg +1</button>
    
    首页
  </view>
</scroll-view>