微信小程序swiper上下循环滚动

今天周五了耶~
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

1、让swiper上下滚动:

vertical="true"

加上属性vertical="true"就可以(vertical只要存在,不管是是true还是false都会变成上下滚动的);
2、swiper循环滚动:

circular="true"

默认的是到最后一张之后一下子滚到第一张,加上circular属性之后变成循环滚动。(也是不管是true还是false都会生效);
3、改变小点的颜色:

indicator-active-color="#DFAC36"
小点颜色变成#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>
小点变成距底部88rpx
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容