小程序的swiper组件实现轮播图-自定义轮播小圆点

 swiper组件

属性	类型	默认值	必填	说明	最低版本
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

swiper-item组件

仅可放置在swiper组件中，宽高自动设置为100%。

属性	类型	默认值	必填	说明	最低版本
item-id	string		否	该 swiper-item 的标识符	1.9.0

轮播图示例

 注意：
    轮播图中的image 中src属性
        填写图片地址时，如果直接src="/static/img/01.jpg"
        在模拟器上可以看到图片，但是真机调试就看不到图片了
    解决方法：
        在data中定义一个数组，存放图片的src地址
        data:{
            imgs:['/static/img/banners/1.jpg',....]
        }
        直接使用wx:for遍历
            <image src="{{item}}"
        这样既可以解决真机调试不显示图片的bug

wxml
<!-- swiper轮播
        宽度 100%
        高度设置为 150px
      swiper-item 子元素 不需要添加或修改他的默认样式
        宽高默认100% 根据父级自动改变
        image：默认宽高不是图片真实大小
  indicator-dots 是否显示圆点
  indicator-color 圆点颜色
  inidicator-active-color 当前颜色
  atuoplay 自动切换
  interval 切换时间间隔
  circular 是否衔接
  vertical 是否纵向滚动
-->
<swiper class="swiperfocus" indicator-dots="{{ showDots }}" indicator-color="rgba(255,0,0,.5)" indicator-active-color="#00f" autoplay interval="4000" circular vertical>
	<swiper-item wx:for="{{imgs}}" wx:key="index">
		<image src="{{item}}"></image>
	</swiper-item>
</swiper>
<view>-------------------模拟改变指示点样式--------------</view>
<view class="wrap">
	<swiper class="swiperfocus" autoplay circular current="{{current}}" bindchange="swiperCurrentchang">
		<swiper-item wx:for="{{imgs}}" wx:key="index">
			<image src="{{item}}"></image>
		</swiper-item>
	</swiper>
	<view class="dots">
		<text class="{{ index == current ? 'dotsactive' : '' }}"  wx:for="{{imgs}}" wx:key="index"></text>
	</view>
</view>

js
App({
  data: {
    showDots:true,
    imgs:['/static/img/banners/1.jpg','/static/img/banners/3.jpg','/static/img/banners/3.jpg'],
    current:0,
  },
  // 获取current
  swiperCurrentchang(e){
    // console.log(e,'获取current')
    let {current} = e.detail
    this.setData({
      current
    })
  }
})

/* pages/02swiper/02swiper.wxss */
.swiperfocus{
  height: 297rpx;
}

.swiperfocus image{
  /* width: 750rpx; */
  width: 100%;
  height: 100%;
}
.wrap{
  position: relative;
}
.wrap .swiperfocus{
  height: 297rpx;
}
.wrap .swiperfocus image{
  width: 100%;
  height: 100%;
}
.wrap .dots{
  position: absolute;
  bottom: 8rpx;
  left: 0;
  width: 100%;
  text-align: center;
}
.wrap .dots text{
  display: inline-block;
  width: 40rpx;
  height: 20rpx;
  background-color: blueviolet;
  margin: 0 12rpx;
  border-radius: 10rpx;
}
.wrap .dots .dotsactive{
  background-color: #fff;
}