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

我会带着你远行 2022-10-08 08:52 233阅读 0赞

![20210620232658467.gif][]

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

![20210620232827263.png][]

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

[20210620232658467.gif]: /images/20221005/bce06b505f244e458c565451f174fcf0.png
[20210620232827263.png]: /images/20221005/cdc3353a472749eca8ede4ba47bfdbc5.png