retail-app/pages/news/index.vue

<template>
	<view class="news">
		<mescroll-body height="100%" ref="mescrollRef" bottom="200" @init="mescrollInit" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="list">
				<view class="list-item" v-for="(item,index) in list" :key="index">
					<view class="time">{{item.sendTime}}</view>
					<view class="new-card">
						<view class="news-cons">
							<view class="name">{{item.title}}</view>
							<view class="text ellipsis-2">{{item.msg}}</view>
						</view>
						<view class="news-detail" @click="toDetail(item.id)">
							<view class="txt">查看详情</view>
							<re-image imgSrc="/retail/mall/icon_more.png" width="24" height="24"></re-image>
						</view>
					</view>
				</view>
			</view>
			<no-data :statusType="2" :top="0" tipsText="暂无数据" v-if="!isInit&&!list.length"></no-data>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from "@/plugins/mescroll/components/mescroll-uni/mescroll-mixins.js"
import MescrollBody from '@/plugins/mescroll/components/mescroll-uni/mescroll-uni.vue'
import { msgPage } from '@/apis/news.js'
export default {
	components:{
        MescrollBody
    },
	data(){
		return{
			isInit: true, // 初次进入页面
			list: [],
		}
	},
	onShow(){
 		if(!this.isInit){
            this.initPage()
        }
	},
	mixins: [MescrollMixin],
	methods: {
		// 初始化
		initPage() {
			this.mescroll.resetUpScroll()
			this.mescroll.scrollTo(0, 300)
		},

		async upCallback(page){
			const res = await msgPage({
				current:page.num,
                size:page.size,
			})
			if (res) {
                //设置列表数据
                if (page.num === 1) { //如果是第一页需手动制空列表
                    this.list = res.records
                } else {
                    this.list = this.list.concat(res.records) //追加新数据
                }
                this.mescroll.endSuccess(res.records.length, res.total > this.list.length)
            }else{
                this.mescroll.endErr()
            }
            uni.hideLoading()
            this.isInit = false
		},

		// 跳转到信息详情
		toDetail(id){
			uni.navigateTo({
				url:'/pages/system/index?id=' + id
			})
		}
	},
}
</script>

<style lang="scss" scoped>
.news{
	padding: 0 20rpx;
	.list{
		.list-item{
			margin-top: 48rpx;
			.time{
				text-align: center;
				font-size: 26rpx;
				margin-bottom: 20rpx;
				color: #989897;
			}
			.new-card{
				background-color: #fff;
				border-radius: 16rpx;
				.news-cons{
					padding: 32rpx 32rpx 24rpx;
					border-bottom: 2rpx solid #F0F2F4;
					.name{
						font-size: 32rpx;
						font-weight: 500;
						color: #363531;
						margin-bottom: 16rpx;
					}
					.text{
						font-size: 28rpx;
						color: #7C7C7B;
					}
				}
				.news-detail{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 24rpx 26rpx 32rpx 22rpx;
					.txt{
						font-size: 28rpx;
						font-weight: 400;
						color: #363531;
					}
				}
			}
		}
	}
}
</style>