uniapp 自定义底部tabbar 点两下 会闪烁问题

在做自定义tabbar时,遇到了个问题,第一次切换tab,底部操作栏会明显的感觉闪烁,并且选中状态还会有抖动现象出现
这里在网上找到几个解决方法汇总一下
1、在tab页的onShow生命周期写了切换选中状态后,tab组件那边的切换就没必要再加setData去修改选择的状态了,可以直接注释掉
js

这里要是onShow那边没做切换tab时的操作,可以这样做
main.js加个下面的代码

Vue.mixin({
  methods:{
    setTabBarIndex(index){
      if (typeof this.$mp.page.getTabBar === 'function' &&
        this.$mp.page.getTabBar()) {
        this.$mp.page.getTabBar().setData({
          selected:index
        })
      }
    }
  }
})

然后在每个tab页的onShow生命周期调用一下

this.setTabBarIndex(1) //当前tab的索引


2、tab组件的wxml文件中 cover-viewcover-image 分别替换为 viewimage
3、image 可以写两个,用hidden进行切换状态,这样,不用切换之后重新加载图片了wxml
4、根据第三点 image 的src参数,可以直接将图片转为 base64 字符串,只是可读性差了点
5、还有一个社区看到一大佬提出方法,博主没有去尝试,感觉效果应该没什么变化
社区
末言:都2020年了,微信小程序官方还是没人回复,离谱的
(博主改完之后还是会有一点点闪烁,但是没那么明显了,怀疑是每个页面都单独的内嵌了自定义的tabar,在切换页面的,去切换tabar的层级,那由于页面的切换闪烁就必不可免了,除非微信官方去修改,将自定义的tabar内嵌改成唯独只有一个,这样就不会出现闪烁的问题)

UniApp中,可以通过自定义底部TabBar来实现自定义底部导航栏。以下是一些步骤来实现自定义底部TabBar: 1. 创建一个底部TabBar组件:在components文件夹中创建一个名为TabBar的组件,用于显示底部导航栏的内容。 2. 在App.vue中引入TabBar组件:在App.vue文件中引入TabBar组件,并在页面中使用该组件。 3. 定义底部导航栏的数据:在TabBar组件中定义一个数组,包含每个底部导航栏的图标、文字等信息。 4. 使用循环渲染底部导航栏:在TabBar组件的template中使用v-for指令,循环渲染每个底部导航栏项。 5. 添加点击事件:为每个底部导航栏项添加点击事件,用于切换页面或执行其他操作。 6. 在页面中使用自定义底部TabBar:在需要显示底部导航栏的页面中,使用自定义底部TabBar组件。 以下是一个简单的示例代码: ```vue <!-- TabBar.vue --> <template> <view class="tab-bar"> <view v-for="(item, index) in tabBarList" :key="index" class="tab-bar-item" :class="{ active: activeIndex === index }" @click="handleTabClick(index)" > <image :src="item.icon" class="tab-bar-icon" /> <text class="tab-bar-text">{{ item.text }}</text> </view> </view> </template> <script> export default { data() { return { tabBarList: [ { icon: 'home.png', text: '首页' }, { icon: 'category.png', text: '分类' }, { icon: 'cart.png', text: '购物车' }, { icon: 'user.png', text: '我的' }, ], activeIndex: 0, }; }, methods: { handleTabClick(index) { this.activeIndex = index; // 执行切换页面或其他操作 }, }, }; </script> <!-- App.vue --> <template> <view class="app"> <router-view /> <TabBar /> </view> </template> <script> import TabBar from '@/components/TabBar.vue'; export default { components: { TabBar, }, }; </script> ``` 在以上示例中,TabBar组件循环渲染了底部导航栏的每个项,并通过点击事件切换页面或执行其他操作。在App.vue中使用了TabBar组件,并在页面中显示底部导航栏。 你可以根据自己的需求,对TabBar组件进行样式和功能的定制,以满足自定义底部TabBar的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值