uni-app 选项卡数据初始化

①往数据库添加数据

②获取数据库的引用，返回客户端。

'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
	}
};

③调用云函数方法

<template>
	<view class="content">
		<!--自定义组件-->
    <navbar></navbar> 
	<tab :list="tabList"></tab>
		<!-- <view v-for="item in 100">{{item}}内容那个</view> -->
	</view>
</template>

<script>
	
     //easyCom components/组件名、组件名.vue 局部引入
	//import navbar from '@/components/navbar/navbar.vue' //引用
	export default {
		// components:{ //注册
		// 	navbar
		// },
		data() {
			return {
				title: 'Hello',
				tabList:[]
			}
		},
		onLoad() {
          this.getLabel()
		},
		methods: {
			//调用云函数方法
         getLabel(){
			 uniCloud.callFunction({
			 	name:'get_label'
			 }).then((res)=>{
				 const {result}=res
				 this.tabList=result.data
				 console.log(this.tabList);
			 })
		 }
		}
	}
</script>

<style lang="sess">
	
</style>

④渲染客户端

<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>
		</scroll-view>
		<view class="tab-icons">
			<uni-icons type="gear" size="26" color="#666"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			list:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data() {
			return {
				
			}
		}
	}
</script>

标签：选项卡,navbar,app,label,return,default,uni,tabList,data
来源： https://blog.csdn.net/weixin_42009898/article/details/115750998