uni - swiper

作者: bianruifeng | 来源:发表于2019-06-28 09:54 被阅读0次

[官方文档] (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>

相关文章

网友评论

    本文标题:uni - swiper

    本文链接:https://www.haomeiwen.com/subject/nanjcctx.html