uni-app 选项卡数据初始化

最新推荐文章于 2024-01-19 15:35:32 发布

热爱编程的孩子

最新推荐文章于 2024-01-19 15:35:32 发布

阅读量1k

点赞数

分类专栏： uni-app

本文链接：https://blog.csdn.net/weixin_42009898/article/details/115750998

版权

uni-app 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

该博客主要介绍了如何使用uniCloud进行数据库操作，包括向数据库添加数据和获取数据引用。然后通过云函数`get_label`将数据返回给客户端，并在客户端的Vue组件中进行数据渲染，展示在tab列表上。示例中展示了云函数的调用方法及客户端数据的接收和渲染过程。

摘要由CSDN通过智能技术生成

①往数据库添加数据
在这里插入图片描述
②获取数据库的引用，返回客户端。

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