uni-app学习日记3

自带的icon

插件链接
使用插件然后应用如下:

<uni-icons type="search" size="16" color="#999"></uni-icons>

改变type即可改变图标:
插件预览地址

变量的解构赋值

ECMAScript 6 入门

const result = this.state.result;

等价于

const {
     result} = this.state;

页面向自定义组件传值

index.vue

<template>
	<view class="content">
		<!-- 导航栏组件 -->
		<navbar></navbar>
*************************************传值组件*************************************
		<!-- 选项卡组件 -->
		<tab :list="tabList"></tab>
		<!-- 不需要this.tabList 但是 tabList要在data中定义-->
******************************************************
		<!-- 内容 1——100 -->
		<view v-for="(item,index) in 100" :key="index">
			{
     {
     item}}
		</view>
	</view>
</template>

<script>
	// easyCom components/组件名/组件名.vue 可以直接用 
	// 不用import 不用components 注册
	// import nabar from "@/components/navbar/navbar.vue"
	export default {
     
		// components: {
     
		// 	navbar,
		// },
***********************必须要定义tabList************************************
		data() {
     
			return {
     
				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="scss">

</style>

你可能感兴趣的:(uni-app学习日记3)