我用的是 Vant Weapp UI组件库，
需要用store 全局共享数据解决tabbar切换激活样式问题

关于如何使用 Mobx，创建store可参考：微信小程序 Mobx实现数据共享（创建store数据共享 + 页面、组件间的数据传递）_Shimeng_1989的博客-CSDN博客

自定义tabbar 步骤：

在app.json中，开启自定义tabbar设置

// 以下内容可参考 小程序文档 -- 自定义tabbar
//     1.在package.json 文件中找到/新增 tabBar对象
//     2.添加custom:true 设置
//     3.开启自定义tabbar后，在根目录创建 custom-tab-bar 文件夹(名字必须叫这个)。
//     4.在此文件夹下创建 index.wxml、index.js、index.wxss、index.json 四个文件
//      (可以将鼠标放在文件夹上，右键 -- (选择)创建component（命名index） -- 回车，则会自从创建这四个文件)  "tabBar": {"custom": true, // 开启自定义tabbar配置"list": [{ // list不需要删掉 -- 为了向下兼容老版tabbar"pagePath": "pages/index/index","text": "首页","iconPath": "/images/1.png","selectedIconPath": "/images/2.png"}, {"pagePath": "pages/request/request","text": "请求","iconPath": "/images/1.png","selectedIconPath": "/images/2.png"}]},

创建自定义 tabbar 对应文件：( 以下内容可参考小程序文档 -- 自定义tabbar)
1. 在package.json 文件中找到/新增 tabBar对象
2. 添加custom:true 设置
3. 开启自定义tabbar后，在根目录创建 custom-tab-bar 文件夹(名字必须叫这个)
4. 在此文件夹下创建 index.wxml、index.js、index.wxss、index.json 四个文件。 (可以将鼠标放在文件夹上，右键 -- (选择)创建component（命名index） -- 回车，则会自从创建这四个文件)

index.wxml文件：

<!-- 可根据项目具体情况，参考Vant Weapp官方文档中的配置修改 -->
<!--  active : 选中 tabbar 的下标 ，info：是否显示消息数量(''/0，则不显示） -->
<!-- for 循环 tabbar数组 -->
<van-tabbar active="{{ active_index }}" bind:change="onChange"><van-tabbar-item wx:for="{{list}}" wx:key="index" info="{{item.info||''}}"><imageslot="icon"src="/images/1.png"mode="aspectFit"style="width: 30px; height: 18px;"/><imageslot="icon-active"src="/images/2.png"mode="aspectFit"style="width: 30px; height: 18px;"/>{{item.text}}</van-tabbar-item>
</van-tabbar>

index.js文件：

// .js文件
/* 注意：!!!每次切换页面时，更新到跳转页面后会刷新active值(我猜的)。所以每次跳转完成后，都会回到 首页(active_index: 0) 的激活状态。因此，要将 active_index (选中tabbar下标）放到store全局数据中。每次跳转时，更新active_index值，激活状态则可保留在当前跳转页的tabbar上。
*/
import { storeBindingsBehavior } from "mobx-miniprogram-bindings"
import { store } from '../store/store'
Component({options: {styleIsolation: 'shared', //设置为shared，修改 Vant Weapp UI组件库中的样式才能生效},behaviors: [storeBindingsBehavior], // 通过 storeBindingsBehavior 来实现自动绑定storeBindings: {store, // 指定要绑定的 storefields: { // 指定要绑定的字段数据active_index:'tabbar_active_index',// 获取 store 中，tabbar选中的下标num1:'store.store_count1', // 获取list中 首页的 info（消息条数）count_sum: 'store_count_sum' // 获取list中 请求的 info（消息条数）},actions: { // 指定要绑定的方法update_tabbarIndex: 'update_Tabbar_active_index' // 更新 tabbar选中的下标}},//  监听 store中值的修改，更新list中的info消息数量observers: {'num1,count_sum': function (num, sum) {// 更新list中的info数量this.setData({'list[0].info': num,'list[1].info': sum,})}},data: {// active_index: 0, // 每次切换页面时，更新为更新跳转页面后会刷新active值(我猜的)，所以每次都会回到首页(下标0)的激活状态。所以要将此字段放到store全局数据中，每次跳转时修改当前值，则可保留在跳转页tabbar激活状态上。list: [{"pagePath": "pages/index/index","text": "首页",info: 0,"iconPath": "/images/1.png","selectedIconPath": "/images/2.png"}, {"pagePath": "pages/myfood/myfood","text": "myfood","iconPath": "/images/1.png","selectedIconPath": "/images/2.png"}]},/*** 组件的方法列表*/methods: {onChange(event) {// event.detail 的值为当前选中项的索引// this.setData({ active_index: event.detail});// 不在此文件data中声明了，所以不需要setData更新值了。改为触发 store 的 action 中的方法修改store中的 active_index (tabbar_active_index) 了this.update_tabbarIndex(event.detail)//更新 store 中 tabbar_active_index(active_index）的值// 跳转到对应tabbar的页面wx.switchTab({url: `/${this.data.list[event.detail].pagePath}`,})},}
})

store.js文件：（公共数据文件）

// store.js文件
/* 创建store实例对象：* observable 中添加字段、计算属性、方法等* 计算属性：用get定义，（ 且只读，不能修改 ）* action方法：修改store中的值*/
import {observable,action
} from 'mobx-miniprogram'export const store = observable({// 字段/数据store_count1: 1,store_count2: 2,tabbar_active_index: 0, // tabbar选中的下标// 计算属性：用get定义，（只读不能修改）get store_count_sum() {return this.store_count1 + this.store_count2},// action方法：用来修改store中的值update_storecount1: action(function (step) {this.store_count1 += step}),// 更新tabbar选中下标update_Tabbar_active_index: action(function (activeIndex) {this.tabbar_active_index = activeIndex})
})

小程序自定义tabbar + 自定义tabbar样式 + tabbar切换激活样式问题相关推荐

微信小程序用vant自定义tabbar页面并跳转相应页面
0.前置安装步骤一安装 vant 组件库 npm i @vant/weapp -S --production 下载完后要npm构建才能使用步骤二修改 app.json 将 app.json 中 ...
微信小程序 - 进阶（自定义组件、promis化、mobx、分包、自定义tabBar）
文章目录一.自定义组件 1.创建组件 2.引用组件 3.组件和页面区别 4.组件样式 5.data.methods.properties 6.小程序的 data 和 properties 区别 7. ...
微信小程序底部实现自定义动态Tabbar
多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里 ...
微信小程序入门二：底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
手把手教你实现小程序中的自定义组件
之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 1.6.3 开始,官方对于 ...
f2 柱状图滚动钉钉小程序_详解钉钉小程序组件之自定义模态框（弹窗封装实现）...
背景开发钉钉小程序中需要用到模态框文档里也没有自己搞一个- 效果大概长这个样点击指定按钮,弹出模态框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局.操作完点击取消或确定关 ...
小程序分享如何自定义封面？
小程序分享如何自定义封面? onShareAppMessage(options) 在 Page 中定义 onShareAppMessage 函数,设置该页面的转发信息. 只有定义了此事件处理函数,右上 ...
微信小程序之callout自定义气泡
最近闲着踩踩地图的坑,一脚下去差点没从坑里爬起来,然后由于某个原因,去研究了微信小程序里面地图callout 这个属性 callout呢,是在标记的点上面显示一个气泡,作为提示用最后展示下效果 ...
Taro编译微信小程序实现顶部自定义导航栏
[需求] 使用taro开发微信小程序的过程中,涉及到小程序的需要自定义顶部导航栏(导航栏渐变色),微信小程序中只能够设置固定的颜色,渐变颜色以及添加其他按钮的操作就不能够通过小程序自带的api来实现 ...

小程序自定义tabbar + 自定义tabbar样式 + tabbar切换激活样式问题

自定义tabbar 步骤：

小程序自定义tabbar + 自定义tabbar样式 + tabbar切换激活样式问题相关推荐

最新文章

热门文章

小程序 自定义tabbar + 自定义tabbar样式 + tabbar切换激活样式问题

自定义tabbar 步骤：

小程序 自定义tabbar + 自定义tabbar样式 + tabbar切换激活样式问题相关推荐

最新文章

热门文章

小程序自定义tabbar + 自定义tabbar样式 + tabbar切换激活样式问题

小程序自定义tabbar + 自定义tabbar样式 + tabbar切换激活样式问题相关推荐