微信小程序自定义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
- 在项目根目录下创建
custom-tab-bar
文件夹- 在
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>