broke_news_wx/components/my-news-list/my-news-list.vue

<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
	<view class="content">
		<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
		<z-paging
			ref="paging"
			v-model="dataList"
			@query="queryList"
			use-page-scroll
			:hide-empty-view="hideEmptyView"
			:refresher-enabled="false"
			@contentHeightChanged="contentHeightChanged"
			:loading-full-fixed="true"
			:auto="false"
			:auto-clean-list-when-reload="false"
		>
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<view class="item" v-for="(item, index) in dataList" :key="index" @click="toDetail(item.id)">
				<view class="itemTitle">
					{{ formatTitle(item.title) }}
					<text v-if="item.title.length > 90" class="allContent">全文</text>
				</view>
				<view class="resources" v-if="item.clueInfoList.length <= 1">
					<view
						class="resourcesItem resourcesItemOne"
						v-for="items in item.clueInfoList"
						:key="items.id"
					>
						<image v-if="items.type == '1'" class="logo" :src="items.localUrl"></image>
						<image v-if="items.type == '2'" class="logo" src="../../static/image/video.png"></image>
						<image v-if="items.type == '3'" class="logo" src="../../static/image/music.png"></image>
						<image
							v-if="items.type == 2 || items.type == 3"
							src="../../static/image/playBtn.png"
							class="playBtn"
						></image>
					</view>
				</view>
				<view class="resources" v-else>
					<view
						class="resourcesItem resourcesItems"
						v-for="items in item.clueInfoList"
						:key="items.id"
					>
						<image v-if="items.type == '1'" class="logo" :src="items.localUrl"></image>
						<image v-if="items.type == '2'" class="logo" src="../../static/image/video.png"></image>
						<image v-if="items.type == '3'" class="logo" src="../../static/image/music.png"></image>
						<image
							v-if="items.type == 2 || items.type == 3"
							src="../../static/image/playBtn.png"
							class="playBtn"
						></image>
					</view>
					<view
						class="resourcesItem resourcesItems"
						v-if="item.clueInfoList.length % 3 == 2"
					></view>
				</view>
				<view class="bottomBox">
					<view class="timeBox">{{ item.modifyTime }}</view>
				</view>
				<view class="seat"></view>
			</view>
		</z-paging>
	</view>
</template>

<script>
import { findPage } from '../../network/api.js';
export default {
	data() {
		return {
			//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
			dataList: [],
			height: 0,
			hideEmptyView: true,
			completeFunc: null
		};
	},
	props: {
		//当前组件的index，也就是当前组件是swiper中的第几个
		tabIndex: {
			type: Number,
			default: function() {
				return 0;
			}
		},
		//当前swiper切换到第几个index
		currentIndex: {
			type: Number,
			default: function() {
				return 0;
			}
		},
		phone: {
			type: String,
			default: function() {
				return '';
			}
		}
	},
	watch: {
		currentIndex: {
			handler(newVal) {
				if (newVal === this.tabIndex) {
					//懒加载，当滑动到当前的item时，才去加载
					setTimeout(() => {
						this.$refs.paging.reload();
					}, 100);
				}
			},
			immediate: true
		}
	},
	methods: {
		toDetail(id) {
			uni.navigateTo({
				url: `../../pages/newsDetail/newsDetail?id=${id}`
			});
		},
		formatTitle(title) {
			return title.length > 105 ? title.substring(0, 104) + '...' : title;
		},
		queryList(pageNo, pageSize) {
			//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
			//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
			//模拟请求服务器获取分页数据，请替换成自己的网络请求
			let statusType = [1, 0];
			const params = {
				pageNumber: pageNo,
				pageSize: pageSize,
				ascription: 1,
				status: statusType[this.tabIndex],
				phone: this.phone
			};
			findPage(params).then(
				res => {
					if (res.data.state == 200) {
						let data = res.data.data.pageRecords.map(item => {
							item.clueInfoList = item.clueInfoList.filter(i => {
								return i.type !== 0;
							});
							return item;
						});
						console.log(data);
						this.$refs.paging.complete(data);
					} else {
						this.$refs.paging.complete([]);
					}
					this.hideEmptyView = false;
					//请求结束，调用父组件的下拉刷新结束回调函数，使得父组件中的z-paging下拉刷新结束
					if (this.completeFunc) {
						this.completeFunc();
					}
				},
				error => {
					this.$refs.paging.complete(false);
					if (this.completeFunc) {
						this.completeFunc();
					}
				}
			);
		},
		//页面通知当前子组件刷新列表
		reload(completeFunc) {
			//先把父组件下拉刷新的回调函数存起来
			this.completeFunc = completeFunc;
			//调用z-paging的reload方法
			this.$refs.paging.reload();
		},
		//当列表高度改变时，通知页面的swiper同步更改高度
		contentHeightChanged(height) {
			const finalHeight = this.dataList.length ? height : 0;
			this.$emit('heightChanged', finalHeight);
		},
		//页面通知当前子组件加载更多数据
		doLoadMore() {
			this.$refs.paging.doLoadMore();
		},
		//页面通知当前子组件清除数据
		clear() {
			this.$refs.paging.clear();
			this.hideEmptyView = true;
		}
	}
};
</script>

<style scoped lang="scss">
/* 注意，1、父节点需要固定高度，z-paging的height:100%才会生效 */
/* 注意，2、请确保z-paging与同级的其他view的总高度不得超过屏幕宽度，以避免超出屏幕高度时页面的滚动与z-paging内部的滚动冲突 */
.content {
	height: 100%;
}

.item {
	.seat {
		height: 8px;
		width: 100%;
		background-color: #f7f7f9;
	}
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 0rpx 30rpx;
	margin-top: 16px;
	.itemTitle {
		font-size: 14px;
		position: relative;
		.allContent {
			position: absolute;
			bottom: 0;
			right: 0;
			color: #2468f2;
			z-index: 10;
			background-color: #ffffff;
		}
	}
	.resources {
		display: flex;
		flex-wrap: wrap;
		margin-top: 8px;
		justify-content: space-between;
		.resourcesItem {
			border-radius: 5px;
			overflow: hidden;
			position: relative;
			margin-bottom: 5px;
			.logo {
				width: 100%;
				height: 100%;
			}
			.playBtn {
				width: 26rpx;
				height: 26rpx;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
		.resourcesItemOne {
			width: 686rpx;
			height: 386rpx;
		}
		.resourcesItems {
			width: 218rpx;
			height: 218rpx;
		}
	}
	.bottomBox {
		margin: 16px 0;
		display: flex;
		align-items: center;
		font-size: 12px;
		color: #5c5f66;
	}
}

.item-detail {
	padding: 5rpx 15rpx;
	border-radius: 10rpx;
	font-size: 28rpx;
	color: white;
	background-color: #007aff;
}

.item-line {
	position: absolute;
	bottom: 0rpx;
	left: 0rpx;
	height: 1px;
	width: 100%;
	background-color: #eeeeee;
}
</style>