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 相关文章推荐
基于jquery的图片的切换(以数字的形式)
Feb 14 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
详解javascript实现瀑布流绝对式布局
Jan 29 Javascript
jQuery通过deferred对象管理ajax异步
May 20 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 jQuery
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
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
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
Thinkphp自定义代码生成工具及用法说明(附下载地址)
2016/05/27 PHP
win7 wamp 64位 php环境开启curl服务遇到的问题及解决方法
2018/09/16 PHP
PHP7新功能总结
2019/04/14 PHP
javascript parseInt 大改造
2009/09/27 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
2020/11/18 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
vue.js自定义组件directives的实例代码
2018/11/09 Javascript
JavaScript静态作用域和动态作用域实例详解
2019/06/17 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
JS前端模块化原理与实现方法详解
2020/03/17 Javascript
vue项目或网页上实现文字转换成语音播放功能
2020/06/09 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
解决python中用matplotlib画多幅图时出现图形部分重叠的问题
2019/07/07 Python
NumPy中的维度Axis详解
2019/11/26 Python
基于TensorBoard中graph模块图结构分析
2020/02/15 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
基于SpringBoot构造器注入循环依赖及解决方式
2020/04/26 Python
python如何调用java类
2020/07/05 Python
大学生收银员求职信分享
2014/01/02 职场文书
七一建党日演讲稿
2014/09/05 职场文书
科学发展观演讲稿
2014/09/11 职场文书
公安机关起诉意见书
2015/05/20 职场文书
2016新年问候语大全
2015/11/11 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
JDBC连接的六步实例代码(与mysql连接)
2021/05/12 MySQL
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
JavaScript实现栈结构详细过程
2021/12/06 Javascript
vue生命周期钩子函数以及触发时机
2022/04/26 Vue.js