ColorUI | TabBar搬运

其实，它这个TabBar就是一个页面，页面里面分别添加其它组件构成分页。

理解了这些，就可以很容易搭建了

​​组件库下载地址​​

一、新建一个项目

二、拷贝到项目根目录

三、在​​app.wxss​​中添加

@import "colorui/main.wxss";
@import "colorui/icon.wxss";

四、在​​app.js​​里的 onLaunch: function() 里面添加

wx.getSystemInfo({
      success: e => {
        this.globalData.StatusBar = e.statusBarHeight;
        let capsule = wx.getMenuButtonBoundingClientRect();
        if (capsule) {
            this.globalData.Custom = capsule;
            this.globalData.CustomBar = capsule.bottom + capsule.top - e.statusBarHeight;
        } else {
            this.globalData.CustomBar = e.statusBarHeight + 50;
        }
      }
    })

五、在将下面的内容替换掉​​app.json​​的内容

{
  "pages":[
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black",
    "navigationStyle": "custom"
  },
  "usingComponents": {
    "cu-custom": "/colorui/components/cu-custom"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

六、将​​...\ColorUI-master\demo\images\tabbar​​​里的​​\images\tabbar​​按文件目录复制到项目根目录

七、将下面内容替换掉​​pages/index/index​​对应内容

​​index.wxss​​

<view class="cu-bar tabbar bg-white shadow foot">
  <view class="action" bindtap="NavChange" data-cur="basics">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/basics{{PageCur=='basics'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='basics'?'text-green':'text-gray'}}">元素</view>
  </view>
  <view class="action" bindtap="NavChange" data-cur="component">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/component{{PageCur=='component'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='component'?'text-green':'text-gray'}}">组件</view>
  </view>
  <view class="action" bindtap="NavChange" data-cur="plugin">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/plugin{{PageCur=='plugin'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='plugin'?'text-green':'text-gray'}}">扩展</view>
  </view>
  <view class="action" bindtap="NavChange" data-cur="about">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/about{{PageCur=='about'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='about'?'text-green':'text-gray'}}">关于</view>
  </view>
</view>

​​index.js​​

Page({
  data: {
    PageCur: 'basics'
  },
  NavChange(e) {
    this.setData({
      PageCur: e.currentTarget.dataset.cur
    })
  },
})

八、结束

接下一篇：​​ColorUI | TabBar分页组件页面内容搭建 ​​

箴言：因为这些东西是非常简单的。不要抱怨自己学不会，那是因为你没有足够用心。