小程序swiper轮播图，自定义样式，两种方法：原生方法和bindchange方法

发表于 | 分类于

一、通过原生方法

1、wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
  <!-- 轮播图 -->
<view class='swiperBar'>
  <swiper duration="1000" indicator-dots="{{true}}" indicator-color="" interval="2000" current="0" indicator-color="#999" indicator-active-color="#ff8a00" autoplay="{{true}}">
    <block>
      <swiper-item>
        <image src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg" />
      </swiper-item>
      <swiper-item>
        <image src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/1.jpg" />
      </swiper-item>
      <swiper-item>
        <image src="http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg" />
      </swiper-item>
    </block>
  </swiper>
</view>

2、wxss

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
  
/* 轮播图部分 */ 
.swiperBar {
  width: 690rpx;
  height: 337rpx;
  margin: 0 auto;
  position: relative;
}
 
.swiperBar swiper {
  width: 100%;
  height: 337rpx;
}
 
.swiperBar image {
  width: 690rpx;
  height: 310rpx;
  -webkit-border-radius: 12rpx;
  -moz-border-radius: 12rpx;
  border-radius: 12rpx;
  -webkit-box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.25);
}
 
/* 设置点点的层级 */
 
.swiperBar .wx-swiper-dots.wx-swiper-dots-horizontal {
  position: absolute;
  top: 328rpx;
  z-index: 999;
}
 
/* 设置点点的样式 */
 
.swiperBar .wx-swiper-dot {
  width: 8rpx;
  display: inline-flex;
  height: 8rpx;
  margin-left: 12rpx;
  justify-content: space-between;
}
 
.swiperBar .wx-swiper-dot::before {
  content: '';
  flex-grow: 1;
  background: #999;
  border-radius: 8rpx;
  -webkit-border-radius: 8rpx;
  -moz-border-radius: 8rxp;
}
 
/* 当前点点的样式 */
 
.swiperBar .wx-swiper-dot-active::before {
  background: #ff8a00;
}
 
.swiperBar .wx-swiper-dot.wx-swiper-dot-active {
  width: 18rpx;
}

二、bindchange方法

1、wxml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<view class="banner">
    <swiper class="bannerswipers" autoplay="{{autoplay}}" current="{{currentSwiper}}" bindchange="swiperChange">  
        <block wx:for="{{imgs}}">  
            <swiper-item>  
                 <image src="{{item.url}}"></image>  
            </swiper-item>  
        </block>  
    </swiper>  
   <!--重置小圆点的样式  -->
    <view class="bannerdots flex alignC flexC">  
        <block wx:for="{{imgs}}">  
            <view class="bannerdot{{index == currentSwiper ? ' banneractive' : ''}}"></view>  
        </block>  
    </view>  
</view>

2、wxss

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
.banner{
  height: auto;
  position: relative;  
}
 
.bannerswipers{  
  width: 100%;
  height: 350rpx; 
}  
.bannerswipers image{  
  width: 100%;
  height: 100%;
  display: block 
}  
 
/*用来包裹所有的小圆点  */
.bannerdots{  
  width: 750rpx;
  height: 36rpx; 
  display: flex;
  flex-direction: row;
  position: absolute;
  left:0;
  bottom: 20rpx;
}  
/*未选中时的小圆点样式 */
.bannerdot{  
  width: 16rpx;  
  height: 16rpx;   
  margin-right: 26rpx;
  background-color: yellow;
  border-radius: 16rpx;
}  
/*选中以后的小圆点样式  */
.banneractive{  
  width: 32rpx;   
  height: 16rpx;
  background-color: coral;
}  
 
.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  display: box;
  flex-wrap: wrap;
}
 
.alignC {
  /*元素居中*/
  align-items: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
}
.flexC {
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
}

3、js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Page({
  data: {
    imgs: [
      { url: 'http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/5.jpg' },
      { url: 'http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/1.jpg' },
      { url: 'http://demo.sc.chinaz.com/Files/DownLoad/webjs1/201801/jiaoben5647/img/2.jpg' }
    ],
    currentSwiper: 0,
    autoplay: true
  },
  swiperChange: function (e) {
    this.setData({
      currentSwiper: e.detail.current
    })
  }
})