ColorUI | TabBar分页组件页面内容搭建

接上一篇：ColorUI | TabBar搬运

ColorUI | TabBar分页组件页面内容搭建

一、在app.json添加路径,保存后会自动生成相应文件

  "pages":[
    "pages/index/index",
    "pages/basics/home/home"
  ],

---

二、pages/basics/home/home相应文件内容

如果有些文件没有生成，就自己手动创建.
home.json

{
  "component": true
}

---

home.wxml
注意，这里有图片加载，我已经拷贝了官方的图片在对应文件路径上了

<scroll-view scroll-y class="scrollPage">
  <image src='/images/BasicsBg.png' mode='widthFix' class='png' style='width:100%;height:486rpx'></image>
  <text>home</text>
</scroll-view>

---

home.js

Component({
  options: {
    addGlobalClass: true,
  },
  data: {
   
  }
})

home.wxss暂时没用到，后面有需要自己再创建。

---

三、pages/index/index相应文件内容(其它文件详见上一篇)

index.json

{
  "usingComponents": {
    "basics": "/pages/basics/home/home"
  }
}

---

index.wxml

<basics wx:if="{{PageCur=='basics'}}"></basics>

...

---

四、结果

其余的几个页面也是这样操作，然后就是往里面添加自己的东西了😆