选项卡制作

一 、组件创建

1. 定义组件tabBar
2. index界面首页面进行组建引入

二、scroll-view组件使用

参考文档地址：https://uniapp.dcloud.io/component/scroll-view

使用scroll-view横向滚动的时候，需要注意，内部需添加一个容器对里面的滚动内容进行包裹

 <scroll-view class="tab-scroll" scroll-x="true">
      <view class="tab-scroll-box">
        <view v-for="(item, index) in navList" :key="index" class="tab-scroll-item">{{ item }}</view>
      </view>
 </scroll-view>

三、点击设置按钮跳转到标签设置界面

 <view class="tab-icons">
      <uni-icons @click="goLabelAdmin" type="gear" size="26" color="#666"></uni-icons>
    </view>

<script>
  // 创建labelAdmin界面之后进行跳转
  uni.navitageTo({url:'/pages/labelAdmin/labelAdmin'})
</script>

四、数据获取

1. 在page界面onLoad生命周期内进行_initLableList方法创建

2. 定义云函数，获取label表中的数据

   'use strict';
   const db = uniCloud.database()
   exports.main = async (event, context) => {
   	const collection = db.collection('label')
   	const res = await collection.get()
   	
   	//返回数据给客户端
   	return {
   		code:0,
   		labelList:res.data
   	}
   };
   

3. page下的index界面进行数据获取，并将数据传递到tabBar组件，unicloud.callFunction方法进行数据获取

   uniCloud.callFunction({
       name: "get_label_list",
       success:(res)=> {
      	 this.labelList = res.result.labelList
       }
   })
   

4. tabBar组件内部prop属性进行数据获取

   props: {
   			labelList: Array
   		}