uniapp swiper点击切换下一张

  • 通过改变current,自动切换
<template>
	<view class="page">
		<swiper class="swiper" :vertical="true" :current="current" @tap="switchNext">
			<swiper-item>
				<view class="swiper-item">
					<image src="https://cdn.caomall.net/syzsj-play-1.png" mode="aspectFill"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="https://cdn.caomall.net/syzsj-play-2.png" mode="aspectFill"></image>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<image src="https://cdn.caomall.net/syzsj-play-3.png" mode="aspectFill"></image>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current:0
			};
		},
		onLoad(){
			
		},
		methods:{
			switchNext(){
				this.current = ++this.current;// 通过改变current,自动切换
			},
		}
	}
</script>

<style lang="scss">
page{
	height:100%;
}
.page{
	background-color: #F2F2F2;
	@include size(750rpx,100%);
	margin-left:-1rpx;
	overflow: hidden;
	.swiper {
		@include size(750rpx,100%);
		.swiper-item {
			@include size(750rpx,100%);
			display: block;
			position:relative;
			z-index:0;
			image{
				@include bgImage();
			}
		}
	}	
}
</style>

posted @ 2023-05-11 23:20  盘思动  阅读(898)  评论(0编辑  收藏  举报