文章目录
- 十、选项卡制作
- 一 、组件创建
- 二、scroll-view 组件使用
- 三、点击设置按钮跳转到标签设置界面
- 四、数据获取
十、选项卡制作
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);},
});
一 、组件创建
- 定义组件 tabBar
- 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>
四、数据获取
-
在 page 界面 onLoad 生命周期内进行_initLableList 方法创建
-
定义云函数，获取 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,}; }; -
page 下的 index 界面进行数据获取，并将数据传递到 tabBar 组件，unicloud.callFunction 方法进行数据获取
uniCloud.callFunction({name: "get_label_list",success:(res)=> {this.labelList = res.result.labelList} }) -
tabBar 组件内部 prop 属性进行数据获取
props: { labelList: Array } -
点击选项卡实现高亮效果
