小程序 swiper轮播页(点击事件)_微信小程序swiper-item点击事件

Swiper轮播页组件
属性
indicator-dots:是否显示面板指示点(小点点)
indicator-color:未选中指示点颜色
Indicator-active-color:当前选中的标示点颜色
autoplay:是否自动播放
current:当前所在滑块的index
Current-item-id:当前所在滑块的item-id不能与current同时制定
interval:自动切换时间间隔
duration:滑动动画时常
bindchange:current改变时会触发change事件e.datall={current.current}
item-id:组件内容
wxxml代码

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" current="{{swiperCurrent}}" bindchange="swiperChange">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image"bindtap="swipclick" />
      </swiper-item>
    </block>
  </swiper>
备注:current="{{swiperCurrent}}当前index bindchange="swiperChange”:current变化时会触发我们可以在这里面得到当前index标示   <block wx:for="{{imgUrls}}">循环,imgUrls是定义的图片数组。 bindtap="swipclick”图片点击事件
1
2
3
4
5
6
7
8

wxss代码

/*轮播页*/
.swiper {
  height: 400rpx;
  width: 100%;
}

.swiper-image {
  height: 100%;
  width: 100%;
}
.slide-image{
   height: 100%;
  width: 100%;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

index.js代码

Page({
  
  data: {
    //轮播页数组
    imgUrls: [    'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    //是否显示指适点
    indicatorDots: true,
    //是否轮播
    autoplay: true,
    //
    interval: 5000,
    duration: 1000,
    inputShowed:false,
    inputVal:"",
    //轮播页当前index
    swiperCurrent:0,

},
//轮播图的切换事件
  swiperChange: function (e) {
    this.setData({
      swiperCurrent: e.detail.current
    })
  },
  //轮播图点击事件
  swipclick: function (e) {
    console.log(this.data.swiperCurrent)
  },

 });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34