- 通过改变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>
标签:uniapp,100%,750rpx,current,点击,include,swiper,size
From: https://www.cnblogs.com/pansidong/p/17392567.html