CBB3/pages/chat/group/list.vue

<template>
	<view>
		<uni-nav-bar statusBar backgroundColor="transparent" fixed title="全部群聊" left-icon="left" @clickLeft="utils.navigateBack()" />
		<view class="lists">
			<view class="item fx-r fx-bc" v-for="item in data" @tap="tapOpen" :data-url="'/pages/chat/chatGroup?groupId=' + item.group_id">
				<view class="img">
					<image :src="utils.getAvatar(item.img,'group_chat')" mode="aspectFill"></image>
				</view>
				<view class="nickname">{{item.name}}</view>
			</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>

<style lang="scss">
	page{background:#F5F5F5}
	.lists{}
	.lists .item{background: #fff;margin-top: 10px;padding: 10px;}
	.lists .item image{width: 40px;height: 40px;border-radius: 6px;}
	.lists .item .nickname{margin-left: 10px;}
</style>

<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
		computed: mapState(['user']),
		data() {
			return {
				data: [],
				page:{
					isFirst:false,
					isLoad:false,
					isFoot:false,
					page:1
				}
			}
		},
		onLoad(option) {
			//获取订单
			this.getData();
		},
		onReachBottom() {
			if(this.page.isFoot || this.page.isLoad) {
				return;
			}
			this.page.page ++;
			this.getData();			
		},
		methods: {
			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("GroupList",post)
					.then(res => {
						uni.hideLoading();
						this.page.isFirst = true;
						this.page.isLoad = false;
						if(isPull) {
							this.data = res.data.list;
						} else {
							this.data = this.data.concat(res.data.list);
						}
						//是否到底
						if(res.data.list.length != res.data.pageSize) {
							this.page.isFoot = true;
						}   
					})
					.catch(res=>{
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
			},
			/**
			 * 打开Open
			 * @param {Object} ev
			 */
			tapOpen:function(ev){
				let url = ev.currentTarget.dataset.url;
				this.utils.navigateTo(url);
			}
		}
	}
</script>