partnerApp/components/modules/tools/poster/scroll-tab-swiper-item/scroll-tab-swiper-item.vue

<template>
	<view class="content">
		<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
		<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
		<!-- refresher-threshold="160rpx" -->
		<z-paging auto-show-back-to-top ref="paging" @query="queryList" :list.sync="dataList" :default-page-size="15"
			:mounted-auto-call-reload="false" style="height: 100%;">
			<!-- <custom-refresher slot="refresher" slot-scope="{refresherStatus}" :status="refresherStatus"></custom-refresher> -->
			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
			<!-- list数据，建议像下方这样在item外层套一个view，而非直接for循环item，因为slot插入有数量限制 -->
			<view style="display:flex;flex-wrap: wrap;">
				<block v-for="(item,index) in dataList" :key="index">
					<poster-list :item="item" :index="index"></poster-list>
				</block>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import posterList from "@/components/modules/tools/poster/poster-list.vue";
	import customRefresher from "@/components/common/custom-refresher/custom-refresher.vue"
	export default {
		components: {
			posterList,
			customRefresher
		},
		data() {
			return {
				dataList: [],
				firstLoaded: false,
				posterlist: [{
						"name": "推荐",
						"list": [{
								"img": "/static/image/poster/baoxian/poster1.jpg",
								"name": "推荐1"
							},
							{
								"img": "/static/image/poster/chanpin/poster1.png",
								"name": "推荐2"
							},
							{
								"img": "/static/image/poster/jieqi/poster1.jpg",
								"name": "推荐3"
							},
							{
								"img": "/static/image/poster/jieri/poster1.jpg",
								"name": "推荐4"
							},
							{
								"img": "/static/image/poster/zengyuan/poster1.png",
								"name": "推荐5"
							}
						]
					},
					{
						"name": "保险",
						"list": [{
								"img": "/static/image/poster/baoxian/poster1.jpg",
								"name": "保险1"
							},
							{
								"img": "/static/image/poster/baoxian/poster2.jpg",
								"name": "保险2"
							},
							{
								"img": "/static/image/poster/baoxian/poster3.jpg",
								"name": "保险3"
							},
							{
								"img": "/static/image/poster/baoxian/poster4.jpg",
								"name": "保险4"
							},
							{
								"img": "/static/image/poster/baoxian/poster5.jpg",
								"name": "保险5"
							},
							{
								"img": "/static/image/poster/baoxian/poster6.jpg",
								"name": "保险6"
							},
							{
								"img": "/static/image/poster/baoxian/poster7.jpg",
								"name": "保险7"
							},
							{
								"img": "/static/image/poster/baoxian/poster8.jpg",
								"name": "保险8"
							},
							{
								"img": "/static/image/poster/baoxian/poster9.jpg",
								"name": "保险9"
							},
							{
								"img": "/static/image/poster/baoxian/poster10.jpg",
								"name": "保险10"
							},
							{
								"img": "/static/image/poster/baoxian/poster11.jpg",
								"name": "保险11"
							},
							{
								"img": "/static/image/poster/baoxian/poster12.jpg",
								"name": "保险12"
							}
						]
					},
					{
						"name": "产品",
						"list": [{
								"img": "/static/image/poster/chanpin/poster1.png",
								"name": "产品1"
							},
							{
								"img": "/static/image/poster/chanpin/poster2.png",
								"name": "产品2"
							},
							{
								"img": "/static/image/poster/chanpin/poster3.png",
								"name": "产品3"
							},
							{
								"img": "/static/image/poster/chanpin/poster4.png",
								"name": "产品4"
							},
							{
								"img": "/static/image/poster/chanpin/poster5.png",
								"name": "产品5"
							},
							{
								"img": "/static/image/poster/chanpin/poster6.png",
								"name": "产品6"
							},
							{
								"img": "/static/image/poster/chanpin/poster7.png",
								"name": "产品7"
							},
							{
								"img": "/static/image/poster/chanpin/poster8.png",
								"name": "产品8"
							},
							{
								"img": "/static/image/poster/chanpin/poster9.png",
								"name": "产品9"
							},
							{
								"img": "/static/image/poster/chanpin/poster10.png",
								"name": "产品10"
							},
							{
								"img": "/static/image/poster/chanpin/poster11.png",
								"name": "产品11"
							},
							{
								"img": "/static/image/poster/chanpin/poster12.png",
								"name": "产品12"
							},
						]
					},
					{
						"name": "节气",
						"list": [{
								"img": "/static/image/poster/jieqi/poster1.jpg",
								"name": "处暑"
							},
							{
								"img": "/static/image/poster/jieqi/poster2.jpg",
								"name": "大暑"
							},
							{
								"img": "/static/image/poster/jieqi/poster3.jpg",
								"name": "谷雨"
							},
							{
								"img": "/static/image/poster/jieqi/poster4.jpg",
								"name": "寒露"
							},
							{
								"img": "/static/image/poster/jieqi/poster5.jpg",
								"name": "惊蛰"
							},
							{
								"img": "/static/image/poster/jieqi/poster6.jpg",
								"name": "立春"
							},
							{
								"img": "/static/image/poster/jieqi/poster7.jpg",
								"name": "立冬"
							},
							{
								"img": "/static/image/poster/jieqi/poster8.jpg",
								"name": "立秋"
							},
							{
								"img": "/static/image/poster/jieqi/poster9.jpg",
								"name": "秋分"
							},
							{
								"img": "/static/image/poster/jieqi/poster10.jpg",
								"name": "夏至"
							},
							{
								"img": "/static/image/poster/jieqi/poster11.jpg",
								"name": "小寒"
							},
							{
								"img": "/static/image/poster/jieqi/poster12.jpg",
								"name": "雨水"
							},
						]
					},
					{
						"name": "节日",
						"list": [{
								"img": "/static/image/poster/jieri/poster1.jpg",
								"name": "端午节"
							},
							{
								"img": "/static/image/poster/jieri/poster2.jpg",
								"name": "父亲节"
							},
							{
								"img": "/static/image/poster/jieri/poster3.jpg",
								"name": "国庆节"
							},
							{
								"img": "/static/image/poster/jieri/poster4.jpg",
								"name": "九一八"
							},
							{
								"img": "/static/image/poster/jieri/poster5.jpg",
								"name": "母亲节"
							},
							{
								"img": "/static/image/poster/jieri/poster6.jpg",
								"name": "女神节"
							},
							{
								"img": "/static/image/poster/jieri/poster7.jpg",
								"name": "七夕节"
							},
							{
								"img": "/static/image/poster/jieri/poster8.jpg",
								"name": "清明节"
							},
							{
								"img": "/static/image/poster/jieri/poster9.jpg",
								"name": "圣诞节"
							},
							{
								"img": "/static/image/poster/jieri/poster10.jpg",
								"name": "植树节"
							},
							{
								"img": "/static/image/poster/jieri/poster11.jpg",
								"name": "中秋节"
							},
							{
								"img": "/static/image/poster/jieri/poster12.jpg",
								"name": "重阳节"
							},
						]
					},
					{
						"name": "增员",
						"list": [{
								"img": "/static/image/poster/zengyuan/poster1.png",
								"name": "增员1"
							},
							{
								"img": "/static/image/poster/zengyuan/poster2.png",
								"name": "增员2"
							},
							{
								"img": "/static/image/poster/zengyuan/poster3.png",
								"name": "增员3"
							},
							{
								"img": "/static/image/poster/zengyuan/poster4.png",
								"name": "增员4"
							},
							{
								"img": "/static/image/poster/zengyuan/poster5.png",
								"name": "增员5"
							},
							{
								"img": "/static/image/poster/zengyuan/poster6.png",
								"name": "增员6"
							},
							{
								"img": "/static/image/poster/zengyuan/poster7.png",
								"name": "增员7"
							},
							{
								"img": "/static/image/poster/zengyuan/poster8.png",
								"name": "增员8"
							},
							{
								"img": "/static/image/poster/zengyuan/poster9.png",
								"name": "增员9"
							},
							{
								"img": "/static/image/poster/zengyuan/poster10.png",
								"name": "增员10"
							},
							{
								"img": "/static/image/poster/zengyuan/poster11.png",
								"name": "增员11"
							},
							{
								"img": "/static/image/poster/zengyuan/poster12.png",
								"name": "增员12"
							},
						]
					}
				]


			}
		},
		props: {
			tabIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
			currentIndex: {
				type: Number,
				default: function() {
					return 0
				}
			},
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if (newVal === this.tabIndex) {
						//懒加载，当滑动到当前的item时，才去加载
						if (!this.firstLoaded) {
							this.$nextTick(() => {
								this.$refs.paging.reload();
							})
						}
					}
				},
				immediate: true
			},
		},
		methods: {
			queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				// this.$request.queryList(pageNo, pageSize, this.tabIndex + 1, (data) => {
				let a = this.posterlist[this.tabIndex].list
				let data = {
					'content': a
				};
				this.$refs.paging.complete(a);
				this.firstLoaded = true;
				// })
			}
		}
	}
</script>

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

	.item {
		position: relative;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 30rpx;
	}

	.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>