效果图
wxml:
<view class="goodsDetails">
<!-- 轮播图 -->
<view class="goodsDetails_top">
<view>
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>
</view>
</view>
</view>
wxss:
.goodsDetails{
padding: 20rpx;
}
/* 轮播图 */
.goodsDetails_top{
width: 100%;
background-color: #ffffff;
border-radius: 20rpx;
overflow: hidden;
}
js:
data: {
imgUrls: [
'/assets/image/buka.jpg',
'/assets/image/buka.jpg',
'/assets/image/buka.jpg',
'/assets/image/buka.jpg',
],
indicatorDots: true, //是否显示面板指示点
autoplay: true, //是否自动切换
interval: 3000, //自动切换时间间隔
duration: 1000, //滑动动画时长
},