根据微信小程序UI库中的iView Weapp封装TabBar

根据微信小程序UI库中的iView Weapp封装TabBar

• iview Weapp``UI库网址：https://weapp.iviewui.com/docs/guide/start

• 到 GitHub 下载iView Weapp的代码，将 dist 目录拷贝到自己的项目中。

• 目录结构：

  

• 在app.json中（这里把"style": "v2",删掉，防止兼容等问题）

  {
    "pages":[
      "pages/home/index",
      "pages/doc/index",
      "pages/chat/index",
      "pages/profile/index"
    ],
    "window":{
      "backgroundTextStyle":"light",
      "navigationBarBackgroundColor": "#fff",
      "navigationBarTitleText": "Weixin",
      "navigationBarTextStyle":"black"
    },
    "tabBar": {
      "color":"#1694DD",
      "selectedColor": "#FA314A",
      "backgroundColor":"#f9f9f910",
      "borderStyle":"black",
      "position": "bottom",
      "custom": true,
      "list": [
        {
          "pagePath":"pages/home/index",
          "text":"首页"
        },
        {
          "pagePath":"pages/doc/index",
          "text":"文档"
        },
        {
          "pagePath":"pages/chat/index",
          "text":"消息"
        },
        {
          "pagePath":"pages/profile/index",
          "text":"我的"
        }
      ]
    },
    "usingComponents": {
      "tabbar":"./custom-tab-bar/index"
    },
    "sitemapLocation": "sitemap.json"
  }
  

• 在自定义组件custom-tab-bar中

  • index.json

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

  • index.wxml

    <i-tab-bar bindchange="handleChange" current="{{current}}" color="#ff5c20">
      <i-tab-bar-item wx:for="{{list}}" key="{{index}}" icon="{{item.icon}}" current-icon="{{item.current_icon}}" i-class="active" title="{{item.title}}"></i-tab-bar-item>
    </i-tab-bar>
    

  • index.js

    // custom-tab-bar/index.js
    Component({
      /**
       * 组件的属性列表
       */
      properties: {
    
      },
    
      /**
       * 组件的初始数据
       */
      data: {
        current: 0,
        list: [{
            title: '首页',
            url: '/pages/home/index',
            icon: 'homepage',
            current_icon:'homepage_fill'
          },
          {
            title: '消息',
            url: '/pages/chat/index',
            icon: 'message',
            current_icon:'message_fill'
          },
          {
            title: '文档',
            url: '/pages/doc/index',
            icon: 'document',
            current_icon:'document_fill'
          },
          {
            title: '我的',
            url: '/pages/profile/index',
            icon: 'mine',
            current_icon:'mine_fill'
          },
        ]
      },
    
      /**
       * 组件的方法列表
       */
      methods: {
        handleChange({detail}) {
          // console.log(detail.key);
          this.setData({current:detail.key})
          wx.switchTab({
            url: this.data.list[detail.key].url
          })
        }
      }
    })
    

• 这时候点击tabbar时有短暂的卡顿现象

  • 在home页面的index.js中

      /**
       * 生命周期函数--监听页面显示
       */
      onShow() {
        this.getTabBar().setData({current:0})
      },
    

  • 在chat页面的index.js中

      /**
       * 生命周期函数--监听页面显示
       */
      onShow() {
        this.getTabBar().setData({current:1})
      },
    

  • 在doc页面的index.js中

      /**
       * 生命周期函数--监听页面显示
       */
      onShow() {
        this.getTabBar().setData({current:2})
      },
    

  • 在doc页面的index.js中

      /**
       * 生命周期函数--监听页面显示
       */
      onShow() {
        this.getTabBar().setData({current:3})
      },
    

• 页面效果展示：