标签：选项卡 navbar app label return default uni tabList data

①往数据库添加数据

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

'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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。