// 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切换闪烁问题
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
相关阅读更多精彩内容
- 参考了微信小程序官网提供的例子创建自定义tabbar,但出现了切换时图标闪现的问题。 先看官网例子: custom...
- 微信小程序 自定义tabBar,使用官方模版,点击切换时 闪烁,体验贼差。然后百度百度,看到网上说的,把selec...
- 前言 写这篇文章是因为自己做小程序的时候遇到一个需求,根据登录的角色来展示不同的tabbar,中间遇到了tabba...
- 开发小程序时,经常遇到的模板就是下方tabBar分不同模块进行页面展示,但官方支付宝小程序底部tabBar提供样式...