Vue中使用better-scroll实现轮播图组件


Posted in Javascript onMarch 07, 2020

better-scroll 是什么

better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化。

better-scroll 是基于原生 JS 实现的,不依赖任何框架。它编译后的代码大小是 63kb,压缩后是 35kb,gzip 后仅有 9kb,是一款非常轻量的 JS lib。

今天我们利用它实现一个横向滚动——轮播图组件。演示如下:

首先来整理一下需求:

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

Vue中使用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()设置自动播放。
<template>
 <div class="slider-apply" ref="slider"> <!-- 显示层 -->
 <div class="slider-group" ref="group"> <!-- 所有图片包裹层 -->
 <slot></slot>   <!-- 插槽显示图片内容 -->
 </div>
 <div class="dots">   <!-- 提示圆点 -->
 <div class="dot" v-for="(item, index) in dots" :key="index" :class="currentIndex===index?'active':''"></div>
 </div>
 </div>
</template>

<script type='text/ecmascript-6'>
import BScroll from 'better-scroll'
export default {
 data () {
 return {
 dots: [],
 currentIndex: 0 /* 当前页下标 */
 }
 },
 props: {
 isLoop: { /* 循环播放 */
 type: Boolean,
 default: true
 },
 isAutoPlay: { /* 自动播放 */
 type: Boolean,
 default: true
 },
 interval: { /* 播放间隔 */
 type: Number,
 default: 2000
 }
 },
 mounted () { /* mounted阶段dom渲染完,20ms确保刷新 */
 setTimeout(() => {
 this.setSliderWidth()
 this.initDots()
 this.initSlider()
 if (this.isAutoPlay) {
 this.autoPlay()
 }
 }, 20)
 },
 methods: {
 setSliderWidth () { /* 获取显示层宽度,计算内容层宽度 */
 const clientWidth = this.$refs.slider.clientWidth
 let sliderWidth = 0
 this.children = this.$refs.group.children
 for (let i = 0; i < this.children.length; i++) {
 this.children[i].style.width = clientWidth + 'px'
 sliderWidth += clientWidth
 }
 if (this.isLoop) { /* 循环播放需要增加前后两个宽度 */
 sliderWidth += clientWidth * 2
 }
 this.$refs.group.style.width = sliderWidth + 'px' /* 设置内容层宽度 */
 },
 initDots () {
 this.dots = new Array(this.children.length)
 },
 initSlider () {
 this.slider = new BScroll(this.$refs.slider, {
 scrollX: true, /* 横向滚动 */
 scrollY: false,
 snap: { /* 循环滚动设置 */
  loop: this.isLoop,
  threshold: 0.3,
  speed: 400
 }
 })
 this.slider.on('scrollEnd', () => {
 const pageIndex = this.slider.getCurrentPage().pageX /* 获取当前轮播页,用于圆点提示 */
 this.currentIndex = pageIndex
 if (this.isAutoPlay) {
  clearTimeout(this.timer) /* 重新设置自动播放,否则无法自动播放 */
  this.autoPlay()
 }
 })
 },
 autoPlay () {
 this.timer = setTimeout(() => {
 this.slider.next(400)
 }, this.interval)
 }
 },
 destroyed () { /* 确保清除定时器 */
 clearTimeout(this.timer)
 }
}
</script>

<style lang="stylus" scoped>
.slider-apply
 position relative  // 让dots找准位置
 height 200px
 width 100%   // slider-apply会依据父元素宽度显示宽度
 overflow hidden  // 超出元素隐藏
 border-radius 5px
 .dots
 position absolute
 bottom 10px
 left 50%
 transform translate(-50%, 0) // 居中
 display flex
 .dot
 margin 0 10px
 height 7px
 width 7px
 background #fff
 border-radius 50%
 .active   // 当前dot样式
 width 15px
 border-radius 50% 5px
</style>

应用组件:slider-apply.vue

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

<template>
 <div class="slider-wrapper">
 <Slider v-if="showSlider"> <!-- showSlider使得数据请求完成后再显示,否则better-scroll可能会计算错误 -->
 <div v-for="item in imageList" :key="item" class="slider-item">
 <img :src="item" class="img">
 </div>
 </Slider>
 </div>
</template>

<script type='text/ecmascript-6'>
import Slider from 'base/slider'
export default {
 data () {
 return {
 imageList: [], // 图片列表
 showSlider: false // 显示slider标志位
 }
 },
 created () {
 this.getImages() // 获取数据
 },
 methods: {
 getImages () {
 this.axios.get('/slider').then((res) => {
 this.imageList = res.data
 this.showSlider = true
 }).catch((err) => {
 console.log(err)
 })
 }
 },
 components: {
 Slider
 }
}
</script>

<style lang="stylus" scoped>

.slider-wrapper
 margin 0 auto
 height 200px // 固定轮播图显示高度
 width 500px // 固定轮播图显示宽度,可设置百分比
 background #000
 border-radius 5px
 .slider-item
 float left // 元素向左浮动
 width 100%
 overflow hidden
 text-align center
 .img
 height 200px
 width 100%

</style>

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

总结

到此这篇关于Vue中使用better-scroll实现轮播图组件的文章就介绍到这了,更多相关vue 轮播图组件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
js event事件的传递与冒泡处理
Dec 06 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
JavaScript实现Base64编码转换
Apr 23 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
JavaScript实现栈结构Stack过程详解
Mar 07 #Javascript
node创建Vue项目步骤详解
Mar 06 #Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 #Javascript
小程序跳转H5页面的方法步骤
Mar 06 #Javascript
js实现点赞按钮功能的实例代码
Mar 06 #Javascript
微信小程序去除左上角返回键的实现方法
Mar 06 #Javascript
vue 使用插槽分发内容操作示例【单个插槽、具名插槽、作用域插槽】
Mar 06 #Javascript
You might like
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
PHP自定义多进制的方法
2016/11/03 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
php获取开始与结束日期之间所有日期的方法
2016/11/29 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
常见的jQuery选择器汇总
2014/11/24 Javascript
JS 实现导航菜单中的二级下拉菜单的几种方式
2016/10/31 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
js实现密码强度检验
2017/01/15 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
Javascript中从学习bind到实现bind的过程
2018/01/05 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
Ant Design的可编辑Tree的实现操作
2020/10/31 Javascript
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
Java实现的执行python脚本工具类示例【使用jython.jar】
2018/03/29 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
Python、 Pycharm、Django安装详细教程(图文)
2019/04/12 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
深入解析神经网络从原理到实现
2019/07/26 Python
浅谈Python中的继承
2020/06/19 Python
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
Java基础面试题
2014/07/19 面试题
企业环保标语
2014/06/10 职场文书
2014年教师节红领巾广播稿
2014/09/10 职场文书
评先进个人材料
2014/12/29 职场文书
2015年“公民道德宣传日”活动方案
2015/05/06 职场文书
纯CSS打字动画的实现示例
2022/08/05 HTML / CSS