swiper 定义放多少张图片,小程序swiper轮播图，自定义样式，两种方法：原生方法和bindchange方法；将点点改为数字（当前第几张 /总共几张）;点击点点跳转当前图片...

一、点点部分

1.1.通过原生方法

(1)wxml文件

(2)wxss

/* 轮播图部分 */

.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;

}

(3)效果展示

1.2.bindchange方法

(1)wxml

(2)wxss

.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

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

})

}

})

(4)效果

二、改为数字(当前第几张 / 总共张数)

(1) wxml

{{(currentSwiper+1)}}/{{imgs.length}}

(2)wxss

.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;

}

/* 改写点点为数字 */

.bannerNum {

width: 150rpx;

height: 50rpx;

line-height: 50rpx;

text-align: center;

position: absolute;

right: 10rpx;

bottom: 40rpx;

background-color: rgba(0, 0, 0, 0.5);

color: #fff;

font-size: 30rpx;

}

(3)js

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

});

}

})

(4)效果

(5)说明

其实就是利用了一个swiper的 bindchange 监听事件，监听到当前为第几张即可；

三、点击点点跳转当前图片

说明：其实原理也比较简单，也是利用 bindchange 做事件监听，监听当前第几张；同时给点点绑定点击事件，在点击点点的时候，改变当前第几张的那个变量值；同时这个当前第几张的变量的值和swiper标签的current双向绑定，即可实现联动。

(1)wxml

{{currentSwiper+1}}

(2)wxss

.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: 50rpx;

height: 50rpx;

line-height: 50rpx;

text-align: center;

margin-right: 26rpx;

background-color: yellow;

border-radius: 100%;

color: #fff;

font-size: 30rpx;

}

/*选中以后的小圆点样式 */

.banneractive {

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;

}

/* 改写点点为数字 */

.bannerNum {

width: 150rpx;

height: 50rpx;

line-height: 50rpx;

text-align: center;

position: absolute;

right: 10rpx;

bottom: 40rpx;

background-color: rgba(0, 0, 0, 0.5);

color: #fff;

font-size: 30rpx;

}

(3)js

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

},

// swiper 监听事件

swiperChange: function (e) {

this.setData({

currentSwiper: e.detail.current

});

},

// 点击跳转到当前的图片

goCurrent(e){

var current = e.currentTarget.dataset.current;

this.setData({

currentSwiper: current

});

}

})

(4)效果