【uniapp】组件注意事项

weex

1. 文字写在text中
2. <list>的子组件只能包括以下四种组件或是fix定位的组件 <cell> 用于定义列表中的子列表项，类似于html中的ul之于li。week会对 <cell> 进行高校的内存回收以达到更好的性能
   <header>:当<header>到达屏幕顶部时，吸附在屏幕顶部
   <refresh> 用于给列表添加下拉刷新的功能
   <loading> 用于与特性 <refresh>类似 用于给列表添加上拉加载更多的功能
3. 图片要给指定宽高

效果图

<template>
	<list>
		<refresh style="height: 80px;" @refresh="refresh" @pullingdown="pullingdown" :display="show">
			<text>
				{{loadingtext}}
			</text>
		</refresh>
		<cell >
			<div style="height: 200px;border-width: 2px;border-style: solid;border-color: #007AFF;background-color: #4CD964;margin: 50px;"> 
				<text></text>
			</div>
		</cell>
		<header>
			<div style="height: 300px;background-color: #333333;">
			
			</div>
		</header>
		<cell v-for="(num,index) in lists" :key="index">
			<div style="height: 200px;border-width: 2px;border-style: solid;border-color: #007AFF;background-color: #4CD964;margin: 50px;"> 
				<text>{{num}}</text>
			</div>
		</cell>
		<loading @loading="onloading" :display="loadshow">
			<text style="display:flex;justify-content: center;width: 720px;">
				上拉加载更多
			</text>
		</loading>
	</list>
</template>
<script>
	export default {
	  data () {
	    return {
		  show:"hide",
		  loadshow:'hide',
		  loadingtext:'下拉可刷新',
	      lists: ['A', 'B', 'C', 'D', 'E'],
		  
	    }
	  },
	  methods:{
		  // 上拉加载事件
		  onloading(){
			  this.loadshow = 'show'
			  setTimeout(()=>{
				  this.lists=[...this.lists,...['a','b','c']]//解构赋值
				  this.loadshow = 'hide'
			  },2000)
		  },
		  //执行刷新
		  refresh(e){
			  this.show = 'show'
		  	this.loadingtext = '正在刷新..'
			setTimeout(()=>{
				this.show = 'hide'
				
				this.loadingtext = '下拉可刷新'
			},1500)
		  },
		  // 判断下拉刷新状态
		  pullingdown(e){
		  	// pullingDistance: 下拉的距离
		  	// viewHeight: refresh 组件高度
			if(e.pullingDistance > e.viewHeight){
				this.loadingtext = '释放就能刷新..'
			}else{
				this.loadingtext = '下拉可刷新'
			}
		  }
	  }
	}
</script>
<style src="@/common/common.css">

</style>
<style>

</style>