better-scroll实现轮播图组件

起步

上一次基于better-scroll实现了移动端纵向滚动的演示。这一次继续利用它实现一个横向滚动——轮播图组件。演示如下：

首先来整理一下需求：

• 能够根据异步请求到的图片数据进行轮播图展示。
• 能够控制它是否自动播放，是否循环播放，自动播放间隔。
• 能够提示当前播放页。

Mock数据

由于是一个demo，从网上找了几张图片写成json格式，数据用于模拟接口数据。这里用到了mock.js。Axios。安装方法如下：

npm install mockjs

npm install --save axios vue-axios

axios使用方法不多赘述，简述一下mock数据。在mock文件夹下新建json文件夹放置json数据文件。新建index.js导出接口。就可以使用axios请求接口了。

[
	"https://img3.mukewang.com/szimg/5df8852609e0762d12000676-360-202.png",
    "https://img1.mukewang.com/szimg/5d9c62fb0907ccf012000676-360-202.png",
    "https://img3.mukewang.com/5aeecb1d0001e5ea06000338-360-202.jpg"
]

const Mock = require('mockjs')

Mock.mock('/slider', 'get', require('./json/slider.json'))

基础组件：slider.vue

将轮播图组件抽象出来，接收isLoop、isAutoPlay、interval属性控制轮播图。从mounted方法调用顺序可以知道思路是

• setSliderWidth()中先获取再设置显示层和图片包裹层高度。
• initDots()根据图片包裹层子元素的个数设置数组放置圆点。
• initSlider()初始化better-scroll。
• autoPlay()设置自动播放。

应用组件：slider-apply.vue

可以根据alider-apply.vue中的使用方法应用在自己的项目中。

如果以上步骤没有看明白的话，可以在我的github中找到源码https://github.com/Gesj-yean/vue-demo-collection。