zoukankan      html  css  js  c++  java
  • 解决微信小程序 自定义tabBar 切换时候闪烁问题

    这个闪烁真的很迷

    我搜了一些资料,进行了以下步骤的操作

    第一种解决办法 ,把tabbar自定义组件的this.setData中的代码注释掉

    在这里插入图片描述

    显示tabbar中的页面中,添加下面的:这个好像没什么用啊

    在这里插入图片描述

    第二种方法:把cover-view标签,全部替换成view标签,cover-image也换成icon

    在这里插入图片描述

    我直接上代码,上面是原本的代码,下面是新代码

    custom-tab-bar/index.wxml

    <!--miniprogram/custom-tab-bar/index.wxml-->
    <!-- <cover-view class="tab-bar">
      <cover-view class="tab-bar-border"></cover-view>
      <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
        <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
        <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
      </cover-view>
    </cover-view> -->
    <!--miniprogram/custom-tab-bar/index.wxml-->
    <view class="tab-bar">
      <view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
        <view class="iconfont {{item.icon}}" style="{{selected === index ? 'color: #2a5ceb' : '#ccc'}}">
          <van-icon name="{{item.icon}}" style="font-size:24px;color: {{selected === index ? '#2a5ceb': '#444444'}};" />
        </view>
        <view class="text" style="font-weight:600;font-size:12px;color: {{selected === index ? '#2a5ceb': '#444444'}};">{{item.text}}</view>
      </view>
    </view>
    

    ###

    在这里插入图片描述

    真的不闪烁了哎!!!!接下来就自己调样式啦~~

    最终建议,大家不要用这个了,搞个单页面应用好了,这个真的不好用

    在这里插入图片描述

  • 相关阅读:
    程序员最怕的事
    钱钟书是怎样做读书笔记的 杨绛
    编码风格不是编码规范
    Google Reader明日关闭:14款替代品对比
    移动应用设计领域中最拔尖的15大应用
    TOGAF:企业信息化复杂吗?
    敏捷个人回顾以及体系2014版线下分享活动
    敏捷个人手机应用iOS和Android公开注册
    IT人的自我导向型学习:学习的4个层次
    IT人的自我导向型学习:学习的3个维度
  • 原文地址:https://www.cnblogs.com/sugartang/p/15586659.html
Copyright © 2011-2022 走看看