微信小程序swiper设置图片圆角和指示形状改变

wxml:

<view class="swiperCont">

      <swiper class="swiper" easing-function="easeInOutCubic" indicator-dots="true" indicator-active-color="#ffffff"

        interval="3000" duration="500" indicator-color="rgba(255, 255, 255, .3)">

        <block wx:for="{{background}}" wx:key="index">

          <swiper-item>

            <view class="swiper-item"><image src="{{item}}"></image></view>

          </swiper-item>

        </block>

      </swiper>

    </view>

js:

Page({

  data: {

    background: ['../../assets/img/banner.png', '../../assets/img/banner.png'],

  }

})

wxss:

.swiperCont{

  width: 100%;

  box-sizing: border-box;

}

.swiper{

  width:710rpx;

  text-align: center;

  overflow: hidden;

  border-radius: 15rpx;

  margin:15rpx auto 30rpx;

}

.swiper-item image{

  width:710rpx;

  height:330rpx;

}

.swiper .wx-swiper-dot{

  width: 30rpx;

  height: 8rpx;

  border-radius:5rpx;

}

/* .swiper .wx-swiper-dot-active{

  background: #fff;

} */

预览：

注释：   圆角的swiper class的宽度和hidden很重要

 

官网：

属性	类型	默认值	必填	说明	最低版本
indicator-dots	boolean	false	否	是否显示面板指示点	1.0.0
indicator-color	color	rgba(0, 0, 0, .3)	否	指示点颜色	1.1.0
indicator-active-color	color	#000000	否	当前选中的指示点颜色	1.1.0
autoplay	boolean	false	否	是否自动切换	1.0.0
current	number	0	否	当前所在滑块的 index	1.0.0
interval	number	5000	否	自动切换时间间隔	1.0.0
duration	number	500	否	滑动动画时长	1.0.0
circular	boolean	false	否	是否采用衔接滑动	1.0.0
vertical	boolean	false	否	滑动方向是否为纵向	1.0.0
previous-margin	string	"0px"	否	前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值	1.9.0
next-margin	string	"0px"	否	后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值	1.9.0
display-multiple-items	number	1	否	同时显示的滑块数量	1.9.0
skip-hidden-item-layout	boolean	false	否	是否跳过未显示的滑块布局，设为 true 可优化复杂情况下的滑动性能，但会丢失隐藏状态滑块的布局信息	1.9.0
easing-function	string	"default"	否	指定 swiper 切换缓动动画类型	2.6.5
bindchange	eventhandle		否	current 改变时会触发 change 事件，event.detail = {current, source}	1.0.0
bindtransition	eventhandle		否	swiper-item 的位置发生改变时会触发 transition 事件，event.detail = {dx: dx, dy: dy}	2.4.3
bindanimationfinish	eventhandle		否	动画结束时会触发 animationfinish 事件，event.detail 同上	1.9.0