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分页组件页面内容搭建

posted @ 2022-03-13 11:23  槑孒  阅读(135)  评论(0)  编辑  收藏  举报