退出系统
2.0 版本 weex 版本

graceUI - weex 教程 - 下拉刷新

原理说明

<refresh> 是 <scroller>、<list>、<waterfall> 的子组件,只能在被它们包含时才能被正确渲染。
利用 refresh 组件可以完成下拉属性功能;

特色

能够自定义下拉刷新位置及动画效果

完整代码

<template>
	<div>
		<list>
			<refresh class="refresh" 
			@refresh="refresh" 
			:display="refreshing ? 'show' : 'hide'" 
			@pullingdown="onpullingdown">
				<loading-indicator class="indicator"></loading-indicator>
				<text class="indicator-text">{{RefreshingTxt}}</text>
			</refresh>
			<cell v-for="(item, index) in lists" :key="index">
				<text class="text" @click="testFun">{{item}}</text>
			</cell>
		</list>
	</div>
</template>
<script>
var page = 1; // 页码
export default {
	data() {
		return {
			lists : [],
			RefreshingTxt : "刷新中",
			refreshing : false
		}
	},
	created : function(){
		this.refresh();
	},
	methods: {
		refresh : function(){
			this.RefreshingTxt = "刷新中";
			console.log(1);
			this.refreshing = true;
			// 可以来自 api 请求的第一页数据
			var arr = [];
			for(let i = 1; i <= 10; i++){
				arr.push(i);
			}
			this.lists = arr;
			setTimeout(() => {
				this.refreshing = false;
			}, 2000);
		},
		 onpullingdown (event) {
			this.RefreshingTxt = "继续下拉刷新";
			// console.log("dy: " + event.dy)
			// console.log("pullingDistance: " + event.pullingDistance)
			// console.log("viewHeight: " + event.viewHeight)
			// console.log("type: " + event.type)
		}
	}
}
</script>
<style>
.text{width:750px; height:200px; background-color: #007AFF; margin:10px 0; font-size:50px; text-align:center; line-height:200px; color:#FFFFFF;}
.refresh{flex-direction:row; justify-content:center; align-items:center;}
.indicator-text {
    color: #888888;
    font-size:32px;
    text-align: center;
  }
  .indicator {
    margin-top: 16px;
    height: 40px;
    width: 40px;
    color: blue;
  }
  .panel {
    width: 600px;
    height: 250px;
    margin-left: 75px;
    margin-top: 35px;
    margin-bottom: 35px;
    flex-direction: column;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    border-color: #DDDDDD;
    background-color: #F5F5F5;
  }
  .text {
    font-size: 50px;
    text-align: center;
    color: #41B883;
  }
</style>