uni-app轮播图组件实现手势滑动

定义swiper-list组件, 两个页面, 一个是swiper-list, 一个是swiper-list-item

<template>
	<swiper class="swiper-list" @change="change" :current='tabIndex'>
		<swiper-item class="swiper-list-item" v-for="(item,index) in tabLsit" :key="index">
			<swiper-list-item :list='article[index]'></swiper-list-item>
		</swiper-item>
	</swiper>
</template>

<script>
	import swiperListItem from './swiper-list-item.vue';
	export default {
		name: "swiper-list",
		components: {
			swiperListItem
		},
		props: {
			tabLsit: {
				type: Array,
				default () {
					return []
				}
			},
			tabIndex: {
				type: Number,
				default: 0
			}
		},
		watch: {
			tabLsit(newVal) {
				if (newVal.length === 0) return
				this.loadData(this.tabIndex)
			}
		},
		// 组件只能用created(), 页面用onLoad()
		created() {},
		data() {
			return {
				articleList: [],
				article: {}
			};
		},
		methods: {
			// 监听swiper滑动事件
			change(e) {
				let current = e.detail.current
				this.$emit('swiperListChange', current)
				this.loadData(current)
			},
			loadData(current) {
				this.$api.getArticle({
					name: this.tabLsit[current].name,
				}).then(res => {
					let {
						data
					} = res
					// 懒加载,强制vue刷新页面
					this.$set(this.article, current, data)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-list {
		height: 100%;
		flex: 1;

		.swiper-list-item {
			// height: 100%;
			// overflow: hidden;

			.scroll-list {
				height: 100%;
			}
		}
	}
</style>

<template>
	<scroll-list class="scroll-list">
		<card-list :item='item' v-for="(item,index) in list" :key="item._id"></card-list>
	</scroll-list>
</template>

<script>
	export default {
		props: {
			list: {
				type: Array,
				default () {
					return []
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-list {
		height: 100%;
	}
</style>

使用

<swiper-list :tabLsit='labelList' :tabIndex='tabIndex' @swiperListChange='swiperListChange'></swiper-list>

		methods: {
			getLabel() {
				this.$api.getLabel().then(res => {
					this.labelList = res.data
				})
			},
			tab({item,index}) {
				this.tabIndex = index
			},
			swiperListChange(current){
				this.swiperIndex = current
				this.tabIndex = current
			}
		}