// pages/custom-tab-bar/index.ts
Component({
data: {
selected: '',//默认为空
list: [// tab
{ id: 'wait', label: '待办', url: '/pages/wait/wait', icon: 'time' },
{ id: 'work', label: '工作台', url: '/pages/work/work', icon: 'laptop' },
{ id: 'mime', label: '我的', url: '/pages/mime/mime', icon: 'user' },
]
},
methods: {
switchTab(e: WechatMiniprogram.BaseEvent) {
const data = e.currentTarget.dataset
const url = data.url;
if (this.data.selected == data.id) return;
// 跳转页面
wx.switchTab({ url });
// 跳转页面的key 存到全局状态内
const app = getApp<IAppOption>();
app.globalData.currentTab = data.id
}
}
})
// pages/home/home.ts
Page({
onShow() {
const app = getApp<IAppOption>()
this.getTabBar().setData({ selected: app.globalData.currentTab })
},
});
// app.ts
App<IAppOption>({
globalData: {
currentTab: 'wait',
},
onLaunch() {
},
})
微信小程序自定义tabbar切换闪烁问题
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 参考了微信小程序官网提供的例子创建自定义tabbar，但出现了切换时图标闪现的问题。 先看官网例子： custom...
- 微信小程序 自定义tabBar，使用官方模版，点击切换时 闪烁，体验贼差。然后百度百度，看到网上说的，把selec...
- 前言 写这篇文章是因为自己做小程序的时候遇到一个需求，根据登录的角色来展示不同的tabbar，中间遇到了tabba...
- 开发小程序时，经常遇到的模板就是下方tabBar分不同模块进行页面展示，但官方支付宝小程序底部tabBar提供样式...
