phone_uni/uni_modules/z-paging/components/z-paging-swiper-item/z-paging-swiper-item.vue

<!-- z-paging -->
<!-- github地址:https://github.com/SmileZXLee/uni-z-paging -->
<!-- dcloud地址:https://ext.dcloud.net.cn/plugin?id=3935 -->
<!-- 反馈QQ群：790460711 -->

<!-- 滑动切换选项卡swiper-item，此组件支持easycom规范，可以在项目中直接引用 -->
<template>
	<view class="zp-swiper-item-container">
		<z-paging ref="paging" :fixed="false" 
			:auto="false" :useVirtualList="useVirtualList" :useInnerList="useInnerList" :cellKeyName="cellKeyName" :innerListStyle="innerListStyle" 
			:preloadPage="preloadPage" :cellHeightMode="cellHeightMode" :virtualScrollFps="virtualScrollFps" :virtualListCol="virtualListCol"
			@query="_queryList" @listChange="_updateList">
			<slot />
			<template #header>
				<slot name="header"/>
			</template>
			<template #cell="{item,index}">
				<slot name="cell" :item="item" :index="index"/>
			</template>
			<template #footer>
				<slot name="footer"/>
			</template>
		</z-paging>
	</view>
</template>

<script>
	import zPaging from '../z-paging/z-paging'
	export default {
		name: "z-paging-swiper-item",
		components: { zPaging },
		data() {
			return {
				firstLoaded: false
			}
		},
		props: {
			// 当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			// 当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			// 是否使用虚拟列表，默认为否
			useVirtualList: {
				type: Boolean,
				default: false
			},
			// 是否在z-paging内部循环渲染列表(内置列表)，默认为否。若use-virtual-list为true，则此项恒为true
			useInnerList: {
				type: Boolean,
				default: false
			},
			// 内置列表cell的key名称，仅nvue有效，在nvue中开启use-inner-list时必须填此项
			cellKeyName: {
				type: String,
				default: ''
			},
			// innerList样式
			innerListStyle: {
				type: Object,
				default: function() {
					return {};
				}
			},
			// 预加载的列表可视范围(列表高度)页数，默认为12，即预加载当前页及上下各12页的cell。此数值越大，则虚拟列表中加载的dom越多，内存消耗越大(会维持在一个稳定值)，但增加预加载页面数量可缓解快速滚动短暂白屏问题
			preloadPage: {
				type: [Number, String],
				default: 12
			},
			// 虚拟列表cell高度模式，默认为fixed，也就是每个cell高度完全相同，将以第一个cell高度为准进行计算。可选值【dynamic】，即代表高度是动态非固定的，【dynamic】性能低于【fixed】。
			cellHeightMode: {
				type: String,
				default: 'fixed'
			},
			// 虚拟列表列数，默认为1。常用于每行有多列的情况，例如每行有2列数据，需要将此值设置为2
			virtualListCol: {
				type: [Number, String],
				default: 1
			},
			// 虚拟列表scroll取样帧率，默认为60，过高可能出现卡顿等问题
			virtualScrollFps: {
				type: [Number, String],
				default: 60
			},
		},
		watch: {
			currentIndex: {
				handler(newVal, oldVal) {
					if (newVal === this.tabIndex) {
						// 懒加载，当滑动到当前的item时，才去加载
						if (!this.firstLoaded) {
							this.$nextTick(()=>{
								let delay = 5;
								// #ifdef MP-TOUTIAO
								delay = 100;
								// #endif
								setTimeout(() => {
									this.$refs.paging.reload().catch(() => {});
								}, delay);
							})
						}
					}
				},
				immediate: true
			}
		},
		methods: {
			reload(data) {
				return this.$refs.paging.reload(data);
			},
			complete(data) {
				this.firstLoaded = true;
				return this.$refs.paging.complete(data);
			},
			_queryList(pageNo, pageSize, from) {
				this.$emit('query', pageNo, pageSize, from);
			},
			_updateList(list) {
				this.$emit('updateList', list);
			}
		}
	}
</script>

<style scoped>
	.zp-swiper-item-container {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}
</style>