微信小程序使用iView Weapp自定义TabBar并解决切换闪烁问题

文章目录

• 前言
• 一、iView Weapp是什么？
• 二、使用步骤
  • 1.引入库
  • 2.读入数据
• 总结

---

前言

在小程序开发中我们常常需要自定义TabBar才能满足业务需求，而在使用自定义TabBar的时候经常会遇到切换菜单图标闪烁和其他种种问题，本文就以iView Weapp的TabBar组件为例，解决一下自定义TabBar切换闪烁问题

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、iView Weapp是什么？

iView Weapp是一套高质量的微信小程序UI组件库 -- 引自官网

二、使用步骤

1.引入组件库

到 GitHub 下载 iView Weapp 的代码，将 dist 目录拷贝到自己的项目中。留下如下四个文件夹

2.修改app.json文件

在app.json文件中，在tabBar对象属性内添加

"custom": true

 3.添加自定义tabBar目录

在项目中的顶级目录建立custom-tab-bar文件夹并建立页面文件

index.wxml文件代码如下

<i-tab-bar current="{{ current }}" color="#ff6444" bindchange="handleChange" fixed="true">
    <i-tab-bar-item key="home" img="/images/home.png" current-img="/images/home_s.png" title="首页"></i-tab-bar-item>
    <i-tab-bar-item key="secondhand" img="/images/seconds.png" current-img="/images/seconds_s.png" title="二手">
    </i-tab-bar-item>
    <i-tab-bar-item key="order" img="/images/myorder.png" current-img="/images/myorders.png" title="订单">
    </i-tab-bar-item>
    <i-tab-bar-item key="user" img="/images/my.png" current-img="/images/my_s.png" title="我的"></i-tab-bar-item>
</i-tab-bar>
<view class="is-ios"></view>

上面的组件为官方示例代码，其中current属性用来定位目前所选菜单所对应的图标，下方的<view>为我为了适配ios横条添加的填充视图 

index.json文件代码如下，用来引用刚才我们下载的组件

{
  "component": true,
  "usingComponents": {
    "i-tab-bar": "/dist/tab-bar/index",
    "i-tab-bar-item": "/dist/tab-bar-item/index"
    }
}

index.js文件代码如下

Component({
  data: {
      current: 'home'
  },
  methods:{
    handleChange ({ detail }) {
      wx.switchTab({
        url: '/gc_school/pages/'+detail.key+'/index',
          })
      },
  }
});

其中的current变量对应的是每个页面的key，初始值为初始页面的key，然后handleChange方法用来接收点击图标时传来的key值之后跳转页面 

index.wxss文件代码如下，定义我们刚刚适配ios横条的样式

.is-ios{
  height: env(safe-area-inset-bottom);
  background-color: #ffffff;
}

重点！！！！

此种方法只会在app.json中tabBar属性中list集合中存在的页面里渲染tabBar，所以我们将我们需要tabBar的页面添加到list中即可，在页面的OnShow函数中添加如下方法：

this.getTabBar().setData({
   current: 'home'
});

其中的current为本页面对应的key值，这样切换过来就不会出现图标乱跳和闪烁问题了 

---

总结

多看官方的开发文档和组件开发文档寻找解决问题的方法，官方开发文档中有相应的代码示例

自定义 tabBar | 微信开放文档https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.htmlhttps://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html