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 @   盘思动  阅读(1078)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)
点击右上角即可分享
微信分享提示