CBB3/pages/news/list.vue

<template>
	<view class="app">
		<view class="new-list" @tap="tapOpen" :data-url="'index?id=' + item.id" v-for="(item,index) of noticeList" :key="index" >
			<view class="name">{{ item.title }}</view>
			<view class="time">{{ item.time }}</view>
		</view>
		
		<view class="loading fx-r fx-ac fx-bc" v-if="page.isFrite && !page.isFoot">
			<image src="../../static/img/xloading.png"></image>
			<text>正在载入更多...</text>
		</view>
		<view class="loading complete" :hidden="!page.isFoot">已加载全部</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				noticeList: [],
				page:{
					isFirst:false,
					isLoad:false,
					isFoot:false,
					page:1
				}
			}
		},
		onLoad() {
			this.getData(true);
		},
		onReachBottom() {
			if(this.page.isFoot || this.page.isLoad) {
				return;
			}
			this.page.page ++;
			this.getData();			
		},
		methods: {
			/**
			 * 打开
			 * @param {Object} ev
			 */
			tapOpen:function(ev){
				let url = ev.currentTarget.dataset.url;
				this.utils.navigateTo(url);
			},
			getData:function(isPull = false){
				if(this.page.isLoad) return;
				this.page.isLoad = true;
				if(isPull) {
					this.page.page = 1;
					this.page.isLoad = false;
					this.page.isFoot = false;
				}
				uni.showLoading({ title: '获取数据中..' });
				var post = {};
				post.page = this.page.page;
				this
					.request
					.post("newsList",post)
					.then(res => {
						uni.hideLoading();
						this.page.isFirst = true;
						this.page.isLoad = false;
						if(isPull) {
							this.noticeList = res.data.list;
						} else {
							this.noticeList = this.noticeList.concat(res.data.list);
						}
						//是否到底
						if(res.data.list.length != res.data.pageSize) {
							this.page.isFoot = true;
						}   
					})
					.catch(res=>{
						console.log(res);
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
			},
		}
	}
</script>


<style>
	page{background-color: #fff;}
	.new-list{padding: 30rpx;border-bottom: 1px solid #E9E9E9;}
	.new-list .name{font-size: 28rpx;color: #333333;width: 100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
	.new-list .time{font-size: 20rpx;color: #999999;margin-top: 18rpx;}
</style>