uni-app选项卡制作 ⑥

十、选项卡制作

1.遇到错误：

2.解决问题：

3.this 指向问题

// 指向： get_label_list
uniCloud.callFunction({
  name: "get_label_list",
  success(res) {
    console.log(this);
  },
});

// 指向：vue实例
uniCloud.callFunction({
  name: "get_label_list",
  success: (res) => {
    console.log(this);
  },
});

一 、组件创建

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 }
   

5. 点击选项卡实现高亮效果