起步
上一次基于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 = requir