dangfei-weapp/pages/msgList/msgList.vue

<template>
	<view 
		class="msgList"
	>
		<view class="mt30">
			<navigator class="msgItem" v-for="(item,index) in msgList" :key="index" :url="`/pages/msgInfo/msgInfo?id=${item.id}`">
				<view class="msgItemLeft">
					<image class="fixedTitle" src="/static/msg_title_3.jpg"></image>
				</view>
				<view class="msgItemRight">
					<text class="msgItemTitle">{{item.title}}</text>
					<text>{{item.added_on}}</text>
				</view>
			</navigator>
		</view>
		<view class="loading" v-if="isMore">没有更多数据了</view>
	</view>
</template>

<script>
	
	import { messageList } from "../../api/index.js"
	
	export default {
		data(){
			return {
				msgList:[],
				isMore:false,
				page_index:1,
				page_size:10,
				scrollType:true
			}
		},
		onShow() {
			this.create({
				page_index:1,
				page_size:10,
			})
		},
		onPullDownRefresh:function(){
			this.scrollType=true
			this.create({
				page_index:1,
				page_size:this.page_index*this.page_size,
			});
		},
		onReachBottom:function(){
			if(!this.isMore){
				this.page_index++;
				this.scrollType=false
				if(!this.loading){
					this.create({
						page_index:this.page_index,
						page_size:10
					})
				}
			}
		},
		methods:{
			create(params){	
				const that = this
				this.$nextTick(function(){
					messageList(params).then(res=>{
						uni.stopPullDownRefresh();  //停止下拉刷新动画
						const { error_code } = res
						if(error_code===200){
							const { data } = res
							if(data.length<1 || data.length<that.page_size){
								that.isMore=true
							}
							if(that.scrollType){
								that.msgList=data
							}else{
								that.msgList=that.msgList.concat(data)
							}
						}
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		width: 100%;
		height: 100%;
		background: $uni-bg-color-normal;
	}
	.msgList{
		width: 100%;
		height: 100%;
	}
	.mt30{
		padding-top: 30rpx;
	}
	.msgItem{
		width: 100%;
		height: 156rpx;
		background-color: $uni-bg-color;
		position: relative;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}
	.msgItem::after,.msgItem::before{
		content: "";
		display: block;
		width: 42rpx;
		height: 42rpx;
		border-radius: 50%;
		position: absolute;
		background: $uni-bg-color-normal;
		left: 138rpx;
	}
	.msgItem::before{
		top: 0;
		margin-top: -21rpx;
	}
	.msgItem::after{
		bottom: 0;
		margin-bottom: -21rpx;
	}
	.fixedTitle{
		display: block;
		width: 72rpx;
		height: 35rpx;
		background-size: 100% 100%;
	}
	.msgItemLeft{
		width: 159rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}
	.msgItemLeft::after{
		content: "";
		display: block;
		width: 6rpx;
		height: 90rpx;
		background: url(../../static/border_circle.jpg);
		background-size: 100% 100%;
		position: absolute;
		top: 50%;
		right: 0;
		margin-top: -45rpx;
		margin-right: -3rpx;
	}
	.msgItemRight{
		width: calc(100% - 159rpx - 89rpx - 57rpx);
		padding: 0 89rpx 0 57rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		font-size: 24rpx;
		color: #999999;
	}
	.msgItemTitle{
		font-size: 28rpx;
		color: #323332;
		margin-bottom: 10rpx;
		display: block;
	}
	.loading{
		font-size: 24rpx;
		text-align: center;
		padding-bottom: 10px;
	}
</style>