[官方文档] (https://uniapp.dcloud.io/component/swiper)
1、让swiper上下滚动:
vertical="true"
加上属性vertical="true"就可以(vertical只要存在,不管是是true还是false都会变成上下滚动的);
2、swiper循环滚动:
circular="true"
默认的是到最后一张之后一下子滚到第一张,加上circular属性之后变成循环滚动。(也是不管是true还是false都会生效);
3、改变小点的颜色:
indicator-active-color="#DFAC36"
4、改变小点的位置:
/* 改变轮播图小点的位置 */
.swiper-box .wx-swiper-dot{ position: relative;top:-88rpx;}
<view class='swiper_box'>
<swiper indicator-dots="{{indicatorDots}}" class='swiper-box' autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="#fff" indicator-active-color="#DFAC36">
<block wx:for="{{imgUrls}}" wx:key>
<swiper-item class="banner" bindtap='{{item.swiperBind}}'>
<image src="{{item.src}}" class="slide-image" width="355" height="150" wx:if='{{item.src!=""&&item.src}}'/>
<image src="/pages/image/default.png" class="slide-image" width="355" height="150" wx:if='{{item.src==""||!item.src}}'/>
</swiper-item>
</block>
</swiper>
</view>
网友评论