MoeNovaClient/components/swiper-item-list/swiper-item-list.vue

<template>
	<view class="content">
		<z-paging v-if="firstLoaded || isCurrentPage" ref="paging" class="paging" @query="queryList" :fixed="false"
			auto-show-back-to-top back-to-top-img="../../static/icon/icon-3.png"
			:back-to-top-style="{width:'80rpx',height:'80rpx',backgroundColor:'#333333',borderRadius:'40rpx',padding:'20rpx',}"
			:loading-more-custom-style="{height:'60px',paddingBottom:'30px'}">
			<slot></slot>
		</z-paging>
	</view>
</template>
</template>

<script>
	export default {
		name: "swiper-item-list",
		data() {
			return {
				// 当前组件是否已经加载过了
				firstLoaded: false,
				// 是否滚动到当前页
				isCurrentPage: false,
				current: 0,
				dataList: [],
			};
		},
		props: {
			// 当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			// 当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			}
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if (newVal === this.tabIndex) {
						// 懒加载，当滑动到当前的item时，才去加载
						if (!this.firstLoaded) {
							// 这里需要延迟渲染z-paging的原因是为了避免在一些平台上立即渲染可能引发的底层报错问题
							this.$nextTick(() => {
								this.isCurrentPage = true;
							})
						}
					}
				},
				immediate: true
			},
		},
		methods: {
			queryList(pageNo, pageSize) {
				this.current = pageNo;
				const params = {
					pageNo: pageNo,
					pageSize: pageSize,
					type: this.tabIndex,
					complete: (data) => {
						this.$refs.paging.complete(data);
						if (!data) return [];
						return data
					}
				}
				this.$emit('query', params)
			},
			// 接收父组件传过来的刷新列表要求
			reload() {
				// 刷新列表数据(如果不希望列表pageNo被重置可以用refresh代替reload方法)
				this.$refs.paging && this.$refs.paging.reload();
			},
		}
	}
</script>

<style lang="scss">
	.content {
		flex: 1;
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
	}

	.paging {
		/* #ifndef APP-NVUE */
		height: 100%;

		/* #endif */
	}
</style>