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>

...

四、结果

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

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