创建组件:
选项卡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 :[], } }, onl oad() { 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: [] }; }, onl oad() { }, 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>