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>
相信坚持的力量,日复一日的习惯.
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛(1)