07-04选项卡
Posted 猎奇游渔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了07-04选项卡相关的知识，希望对你有一定的参考价值。
创建组件：
选项卡tab组件：
<template>
<view class="tab">
<scroll-view class="tab-scroll" scroll-x>
<view class="tab-scroll_box">
<view v-for="item in list" class="tab-scroll_item">{{item.name}}</view>
</view>
</scroll-view>
<view class="tab-icons">
<uni-icons type="gear" size="26" color="#666"></uni-icons>
</view>
</view>
</template>
<script>
export default {
name: "tab",
data() {
return {
list: [{
name: \'uni-app\'
},
{
name: \'vue\'
},
{
name: \'html\'
},
{
name: \'js\'
},
{
name: \'php\'
},
{
name: \'node\'
},
{
name: \'mysql\'
},
]
};
}
}
</script>
<style lang="scss">
.tab {
display: flex;
width: 100%;
border-bottom: 1px solid #eee;
background: #fff;
box-sizing: border-box;
.tab-scroll {
flex: 1;
overflow: hidden;
box-sizing: border-box;
.tab-scroll_box {
display: flex;
align-items: center;
flex-wrap: nowrap;
// justify-content: space-around;
height: 45px;
box-sizing: border-box;
// border: 1px solid red;
.tab-scroll_item {
// 不让元素进行挤压
flex-shrink: 0;
padding: 0 10px;
color: #333;
font-size: 14px;
}
}
}
.tab-icons {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 45px;
&::after{
content: \'\';
position: absolute;
top:12px;
bottom: 12px;
left: 0;
width: 1px;
background: #ddd;
}
}
}
</style>
选项卡数据：
新建云函数：
起名创建后：
打开web控制台：
get_label云函数：
\'use strict\';
// 获取数据库的引用
const db = uniCloud.database();
exports.main = async (event, context) => {
// 拿到label数据表
let label = await db.collection(\'label\').get();
//返回数据给客户端
return {
code:200,
msg:\'数据请求成功\',
data:label.data
}
};
tabbar的index.vue:
<template>
<view class="navbar">
<!-- 自定义组件导航栏 -->
<navbar></navbar>
<!-- 把拿到的数据传递给tab组件 -->
<tab :tabList="tabList"></tab>
<!-- <view v-for="item in 100">测试</view> -->
</view>
</template>
<script>
// easycom components/组件名/组件名.vue 属于局部引入，比如components中有很多组件，只有用到了才会编译到项目中
// import navbar from \'@/components/nav-bar/nav-bar.vue\'
export default {
// components:{
// navbar,
// },
data() {
return {
tabList :[],
}
},
onLoad() {
this.getLabel();
},
methods: {
getLabel(){
// 调用云函数API
uniCloud.callFunction({
// 是哪个云函数
name:\'get_label\',
// 方式一
// success(res) {
// console.log(res)
// this.tabList = res.result.data;
// }
// 方式二
}).then(res=>{
let {result} = res;
this.tabList = result.data;
})
}
},
}
</script>
<style lang="scss">
</style>
tab组件：
<template>
<view class="tab">
<scroll-view class="tab-scroll" scroll-x>
<view class="tab-scroll_box">
<!-- <view v-for="(item,index) in list" :key="index" class="tab-scroll_item">{{item.name}}</view> -->
<view v-for="(item,index) in tabList" :key="index" class="tab-scroll_item">{{item.name}}</view>
</view>
</scroll-view>
<view class="tab-icons">
<uni-icons type="gear" size="26" color="#666"></uni-icons>
</view>
</view>
</template>
<script>
export default {
name: "tab",
props:{
tabList:{
type:Array,
default:()=>{
return [];
}
}
},
data() {
return {
list: []
};
},
onLoad() {
},
methods:{
}
}
</script>
<style lang="scss">
.tab {
display: flex;
width: 100%;
border-bottom: 1px solid #eee;
background: #fff;
box-sizing: border-box;
.tab-scroll {
flex: 1;
overflow: hidden;
box-sizing: border-box;
.tab-scroll_box {
display: flex;
align-items: center;
flex-wrap: nowrap;
// justify-content: space-around;
height: 45px;
box-sizing: border-box;
// border: 1px solid red;
.tab-scroll_item {
// 不让元素进行挤压
flex-shrink: 0;
padding: 0 10px;
color: #333;
font-size: 14px;
}
}
}
.tab-icons {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 45px;
&::after{
content: \'\';
position: absolute;
top:12px;
bottom: 12px;
left: 0;
width: 1px;
background: #ddd;
}
}
}
</style>
以上是关于07-04选项卡的主要内容，如果未能解决你的问题，请参考以下文章