微信小程序之自定义轮播图实例 —— 微信小程序实战系列（3

重点说明：

由于微信小程序，整个项目编译后的大小不能超过 1M

查看做轮播图功能的一张图片大小都已经有 100+k 了

那么我们可以把图片放在服务器上，发送请求来获取。

index.wxml：

这里使用小程序提供的<swiper>组件

autoplay：自动播放

interval：自动切换时间

duration：滑动动画的时长

current：当前所在的页面

bindchange：current 改变时会触发 change 事件

由于<swiper>组件提供的指示点样式比较单一，另外再自定义指示点的样式

<view class="recommend" >

<view class="swiper-container">

<swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">

<block wx:for="{{slider}}" wx:key="unique">

<swiper-item data-id="{{item.id}}" data-url="{{item.linkUrl}}">

<image src="{{item.picUrl}}" class="img"></image>

</swiper-item>

</block>

</swiper>

<view class="dots">

<block wx:for="{{slider}}" wx:key="unique">

<view class="dot{{index == swiperCurrent ? ' active' : ''}}" bindtap="chuangEvent" id="{{index}}">{{index+1}}</view>

</block>

</view>

</view>

</view>

index.wxss：

.swiper-container{

position: relative;

}

.swiper-container .swiper{

height: 300rpx;

}

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

.swiper-container .swiper .img{

width: 100%;

height: 100%;

}

.swiper-container .dots{

position: absolute;

right: 40rpx;

bottom: 20rpx;

display: flex;

justify-content: center;

}

.swiper-container .dots .dot{

margin: 0 10rpx;

width: 28rpx;

height: 28rpx;

background: #fff;

border-radius: 50%;

transition: all .6s;

font: 300 18rpx/28rpx "microsoft yahei";

text-align: center;

}

.swiper-container .dots .dot.active{

background: #f80;

color:#fff;

}

index.js：

//导入 js

var util = require('../../utils/util.js')

Page({

data: {

slider: [],

swiperCurrent: 0

},

onLoad: function () {

var that = this;

//网络访问，获取轮播图的图片

util.getRecommend(function(data){

that.setData({

slider: data.data.slider

})

});

},

//轮播图的切换事件

swiperChange: function(e){

//只要把切换后当前的 index 传给<swiper>组件的 current 属性即可

this.setData({

swiperCurrent: e.detail.current

})

},

//点击指示点切换

chuangEvent: function(e){

this.setData({

swiperCurrent: e.currentTarget.id

})

}

})