siyu_app/pages/course/comment2.nvue

	<template>
	<view class="content" style="width:100%;">

		<list class="container" style="height: 700px;" loadmoreoffset="100" @loadmore="loadmore">
			<refresh @pullingdown='onpullingdown' @refresh="onrefresh" :display=" refreshing ? 'show' : 'hide' " class="refresh x-c ">
				<loading-indicator style="width: 22px;height: 22px;color:#999;"></loading-indicator>
				<text class="es-fs-32 es-ml-8">{{refreshText}}</text>
			</refresh>
			<cell v-for="(item,index) in list" :key="index">
				<view class="es es-h-120 es-pt-20 es-pb-20 x-c " style="width: 100%;background-color: red;" :style=" index == list.length-1 ? 'border-bottom-width:0' : '' ">
					<text class="f24_333 flex-1">一楼无线局域网</text>
				</view>
			</cell>
			<cell v-if="showLoadMore || list.length > 4">
				  <view class="loading-more">
					<text class="loading-more-text">{{loadMoreText}}</text>
				  </view>
			</cell>
		</list>
		
		<!-- <view class="uni-loadmore x-c" v-if="showLoadMore">
		    <text class="es-fs-28">{{loadMoreText}}</text>
		</view> -->
		<!-- <uni-load-more :status="status" :icon-size="16" :content-text="loadMoreText" /> -->
	</view>
</template>

<script>
	export default {
		data() {
			
			return {
				list:[],
				refreshing: false,
				refreshText: '↓ Pull To Refresh',
				loadMoreText:"加载中...",
				showLoadMore:false,
				max: 0
			};
		},
		onReachBottom() {
			console.log("onReachBottom");
			if (this.max > 50) {
				this.loadMoreText = "没有更多数据了!"
				return;
			}
			this.showLoadMore = true;
			setTimeout(() => {
				this.setListData();
			}, 300);
		},
		onPullDownRefresh() {
			console.log('onPullDownRefresh');
			this.initData();
		},
		onLoad() {
			this.initData();
		},
		methods: {
			onpullingdown(e) {
				if (this.refreshing) return;
				if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
					this.refreshText = '下拉更新'
				} else {
					this.refreshText = '释放更新'
				}
			},
			onrefresh(e) {
				if (this.refreshing) return;
				this.refreshing = true;
				setTimeout(() => {
					this.refreshing = false;
					this.refreshText = '加载中'
				}, 200)
			},
			loadmore(){
				console.log("loadmore");
				if (this.max > 50) {
					this.loadMoreText = "没有更多数据了!"
					return;
				}
				this.showLoadMore = true;
				setTimeout(() => {
					this.setListData();
				}, 300);
			},
			initData(){
				setTimeout(() => {
					this.max = 0;
					this.list = []
					let data = [];
					this.max += 10;
					for (var i = this.max - 19; i < this.max + 1; i++) {
						data.push(i)
					}
					this.list = this.list.concat(data);
					uni.stopPullDownRefresh();
				}, 300);
			},
			setListData() {
				let list = [];
				setTimeout(() => {
					this.max += 10;
					for (var i = this.max - 9; i < this.max + 1; i++) {
						list.push(i)
					}
					this.list = this.list.concat(list);
					uni.stopPullDownRefresh();
				}, 300);
			}
		}
	}
</script>

<style>
	
	.content{
		position: relative;
		width: 100%;
	}
	
	.refresh {
		display: flex;
		flex-direction: row; 
	    justify-content: center;
		height: 50px;
	}
	
	.refresh-view {
	  /* #ifndef APP-NVUE */
	  display: flex;
	  /* #endif */
	  width: 750rpx;
	  height: 64px;
	  flex-direction: row;
	  flex-wrap: nowrap;
	  align-items: center;
	  justify-content: center;
	}
	
	.refresh-icon {
	  width: 32px;
	  height: 32px;
	  transition-duration: .5s;
	  transition-property: transform;
	  transform: rotate(0deg);
	  transform-origin: 15px 15px;
	}
	
	.refresh-icon-active {
	  transform: rotate(180deg);
	}
	
	.loading-icon {
	  width: 28px;
	  height: 28px;
	  margin-right: 5px;
	  color: gray;
	}
	
	.loading-text {
	  margin-left: 2px;
	  font-size: 16px;
	  color: #999999;
	}
	
	.loading-more {
	  align-items: center;
	  justify-content: center;
	  padding-top: 14px;
	  padding-bottom: 14px;
	  text-align: center;
	}
	
	.loading-more-text {
	  font-size: 30rpx;
	  color: #999;
	}
	
</style>