dati/pages/article/index.vue

<template>
	<view>
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<!-- #ifndef MP-WEIXIN -->
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left"></view>
				<view class="kaoshi-head-m">新闻资讯</view>
				<view class="kaoshi-head-right"></view>
			</view>
		</view>
		<!--#endif-->
		<mescroll-body height="auto" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption">
			<view class="news-content">
				<view class="news-list" v-for="(item,index) in list" :key="index" @tap="gotoDetail(item)">
					<view class="news-flex">
						<image :src="item.image == '' ? '../../static/img/pic.jpg' : item.image" class="news-list-img">
						</image>
						<view class="news-list-r">
							<view class="news-list-title">{{item.title}}</view>
							<view class="news-list-time">{{item.noticetime}}</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				// 下拉刷新的配置(可选, 绝大部分情况无需配置)
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					native: false // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效(native: true, 则需在pages.json中配置"enablePullDownRefresh":true)
				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						num: 0,
						size: 20 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				// 列表数据
				list: [],
			}
		},
		onShow() {
			this.canReset && this.mescroll.resetUpScroll() // 自行实现的刷新指定一条数据  
			this.canReset = true // 过滤第一次的onShow事件,避免初始化界面时重复触发upCallback, 无需配置auto:false
		},
		computed: {
			...mapState(['subject', 'userinfo']),
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				withShareTicket: true,
				menus: ["shareAppMessage", "shareTimeline"]
			})
			// #endif
		},
		methods: {
			gotoDetail(item) {
				if (item.url == '') {
					uni.navigateTo({
						url: '/pages/article/detail?id=' + item.id + '&type=1'
					})
				} else {
					uni.navigateTo({
						url: '/pages/webview/webview?url=' + item.url + '&title=' + item.title
					})
				}
			},

			/*上拉加载的回调*/
			async upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条

				let res = await this.$myHttp.post({
					url: this.$myHttp.urlMap.noticeList,
					data: {
						// type:this.current_id,
						subject_id: this.subject.id || this.subList[0].id,
						page: pageNum,
						limit: pageSize,
						cate_id: 2
					},
					needLogin: false
				})
				if (res.code == 1) {
					// 接口返回的当前页数据列表 (数组)
					let curPageData = res.data.data;
					// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
					let curPageLen = curPageData.length;
					// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
					// let totalPage = data.xxx;
					// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
					let totalSize = res.data.total;

					this.mescroll.endBySize(curPageLen, totalSize);
					if (page.num == 1) this.list = []; //如果是第一页需手动置空列表
					this.list = this.list.concat(curPageData); //追加新数据
				} else {
					this.mescroll.endErr()
				}
				// 此处仍可以继续写其他接口请求...
				// 调用其他方法...
			},
		}
	}
</script>

<style>
	page {
		background-color: #f6f6f6;
	}

	.news-content {
		width: 98%;
		margin: 0 auto 25px;
	}

	.news-title {
		display: flex;
		align-items: center;
		margin: 15px 0 13px;
		font-size: 18px;
		font-weight: bold;
		justify-content: space-between;
	}

	.news-title .iconfont {
		font-size: 15px;
		margin-left: 8px;
		color: #bbb;
	}

	.news-flex {
		display: flex;
		align-items: flex-start;
	}

	.news-list-img {
		width: 66px;
		height: 66px;
		border: solid 1px #f1f1f1;
		border-radius: 6px;
	}

	.news-list-r {
		margin-left: 10px;
		flex: 1;
		height: 66px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.news-list-title {
		font-size: 16px;
		line-height: 21px;
		padding-top: 4px;

		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		display: -moz-box;
		-moz-line-clamp: 2;
		-moz-box-orient: vertical;
		overflow-wrap: break-word;
		word-break: break-all;
		white-space: normal;
		overflow: hidden;
	}

	.news-list-time {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		color: #999;
		font-size: 13px;
	}

	.news-list-flex {
		display: flex;
		align-items: center;
		margin-top: 3px;
	}

	.swiper {
		height: 160px !important;
	}

	.news-list {
		background: #fff;
		padding: 11px 13px;
		margin: 14px 8px;
		border-radius: 10px;
		box-shadow: 2px 4px 10px rgb(0 0 0 / 8%);
	}

	.news-content .news-list:last-child {
		margin-bottom: 0;
		border-bottom: none
	}
</style>