uni-app实现轮播图【数字胶囊】官⽹：
效果图：
<view class="swiper">
<swiper :interval="3000" :duration="1000" :indicator-dots="false"
:current="topSwiperIndex" @change="topSwiperTab">
<swiper-item v-for="(item,index) in topSwiper" :key="index">
<view class="swiper-item">
<image :src="item.src" mode="aspectFill"></image>
</view>
</swiper-item>
</swiper>
<!-- ⾃定义指⽰点dots -->
<view class="dots">
<text>{{topSwiperIndex+1}}/{{topSwiper.length}}</text>
</view>
</view>
data() {
return {
topSwiperIndex: 0,
topSwiper: [
{
src: require('../../static/images/1.jpg')
},
{
src: require('../../static/images/1.jpg')
},
{
src: require('../../static/images/1.jpg')
},
{
src: require('../../static/images/1.jpg')
},
{
src: require('../../static/images/1.jpg')
}
]
};
html5轮播图代码效果图
},
methods:{
topSwiperTab(e) {
var that = this;
}
}
注：swiper轮播图的默认⾼度是150px，通常我们的轮播图⽚⾼度不是这个。
解决办法：
指定swiper标签的宽⾼，然后在指定image图⽚的宽⾼swiper{
width: 100%;
height: 777.17rpx;
swiper-item{
image {
width: 100%;
height: 781.7rpx;
display: block;
}
}
}
拓展：uni-app实现轮播图⾃定义⼩圆点

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。