天元建设集团有限公司第六建筑工程公司_网页设计与应用毕业论文_做直销去哪里找客户_网站搭建平台都有哪些

十、选项卡制作

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. 点击选项卡实现高亮效果