Vue项目中使用better-scroll实现一个轮播图自动播放功能

前言

better-scroll是一个非常非常强大的第三方库 在移动端利用这个库 不仅可以实现一个非常类似原生ScrollView的效果 也可以实现一个轮播图的效果 这里就先记录一下自己实现这个效果的一些过程吧

思路

1.首先要确定自己的HTML结构 基本结构就是一个wrapper包含一个content

2.其次需要明白的一个页面可以滚动的原理在于 当内容的高度超出了容器的高度才可以实现滚动 如果没有超出 那么就没有滚动的必要 因此第一点需要实现的就是 获取到所有内容的高度 由于实现的是一个轮播图 所以其实整个页面应该想象成这样

滚动原理

这里可以很清楚的看到 当页面的横向宽度超出了视口的宽度 因此也就可以实现滚动 综上所述 可以看出 实现横向轮播最重要的一点在于宽度 因此 我们首先要获得的就是整个轮播图的宽度

3.既然是个轮播图 那么用户同时也需要知道的就是 当前播放的是第几张图 也就是常见的"小白点" 小白点的个数用于告诉用户总共有几张图 而当前播放第几张图则可以在小白点上加上一些特殊样式的方法来告知用户

4.轮播图也需要一些常见的属性 例如 页面渲染以后自动播放以及播放间隔 还有一个就是 是否支持循环轮播

理清思路以后 就可以开始干活了 1.完善HTML结构 其实代码非常简单 也就是创建两个div 并且添加ref引用可以方便的通过ref属性获取上下文

<div class="slider"
 ref="slider">
 <div class="slider-content"
  ref="sliderContent">
 <slot></slot>
 </div>
</div>

这里用了vue中非常常见的slot插槽 为的是当我们在外部调用这个slider组件的时候 可以方便的在外部传入一些子组件

2.上文已经提到了一些控制slider的属性 所以需要在组件的props里接受这些属性 便于我们在外部方便的控制这些属性

props: {
 // 是否循环播放
 loop: {
 type: Boolean,
 default: true
 },
 // 是否自动播放
 autoPlay: {
 type: Boolean,
 default: true
 },
 // 播放间隔
 interval: {
 type: Number,
 default: 3000
 }
 }

3.一些初始步骤的完成的差不多了以后 我们需要借助到vue的一个生命周期钩子 mounted 也就是当页面渲染完毕以后 去获取轮播图的宽度以及初始化轮播图的一些设置

mounted: function () {
 setTimeout(() => {
 this.setSliderWidth()
 this.initSlider()
 }, 20)

这里有一个小小的tips 就是 通常情况下 浏览器渲染dom的时间为17ms 所以这里使用了一个延迟函数 在20ms以后去调用这些方法 也就是确保浏览器的dom被正确渲染 防止出现一些问题

4.上面只是调用了这个方法 还没有实现这些方法 首先在设置宽度的方法里 我们需要通过$refs.sliderContent拿到上下文 并且通过一个$refs.slider.clientWidth方法拿到当前屏幕宽度 然后遍历这个容器 取得容器里的所有内容 同时把获取的内容宽度设置为这个屏幕的宽度 最后所有的内容的宽度相加 就可以得到整个slider的宽度 说了这么多 感觉很绕口 所以还是看下代码吧

// 设置slider的宽度
 setSliderWidth: function (isResize) {
 // 获取slider里的所有的子元素
 this.children = this.$refs.sliderContent.children
 // console.log(this.children)
 // 计算宽度 = 图片个数+每张图片的宽度
 let width = 0
 // 获取手机屏幕的宽度
 let sliderWidth = this.$refs.slider.clientWidth

 for (let i = 0; i < this.children.length; i++) {
 // 获取children里的每一项内容
 let child = this.children[i]

 child.style.width = sliderWidth + 'px'
 width += sliderWidth
 }
 if (this.loop) {
 width += 2 * sliderWidth
 }
 this.$refs.sliderContent.style.width = width + 'px'
 }

这样我们就获取了整个slider的宽度 还有一个细节在于 当如果是loop的时候 better-scroll会在头尾克隆两份 所以宽度会需要*2 接下去就是实现一些初始化better-scroll的一些配置了 具体的参数内容可以从better-scorll官网上查询到 这里就不多做赘述了

 // 设置宽度以后初始化slider
 initSlider: function () {
 this.slider = new BScroll(this.$refs.slider, {
 scrollX: true,
 scrollY: false,
 momentum: false,
 snap: {
  loop: this.loop,
  threshold: 0.3,
  speed: 400
 },
 click: true
 })
 }

5.实现上述两个方法以后 其实轮播图基本已经可以在页面上看到了 大概就是长成这样 不过这样写完以后 会发现轮播图是没有办法自动轮播的以及当前显示的是几张图的样式并没有正确显示 所以接下去就是实现这两个方法 ps:这里的图片数据来源什么 是请求了QQ音乐banner的接口文件

轮播图的效果

6.实现dots样式的正确加载 这里用到了vue中样式的绑定

<div class="dots">
 <span class="dot"
  v-for="(item, index) of dots"
  :class="{active:currentPageIndex === index}"
  :key="index">
 </span>
 </div>

也就是说 我们通过下标来绑定样式 同时监听一个better-scroll的'scrollEnd'事件 当滚动结束的时候调用getCurrentPage()这个方法 这个方法会有一个返回值pageX 也就是横向滚动到第几页 把这个返回值赋值给currentPageIndex 从而达到正确显示样式的目的

this.slider.on('scrollEnd', () => {
 let page = this.slider.getCurrentPage().pageX
 this.currentPageIndex = page
 // 当滚动结束以后 如果是自动播放的话 那么首先要清除定时器(防止手动拖动轮播图以后图片无法正确显示)然后再次执行方法 才能实现轮播
 if (this.autoPlay) {
  clearTimeout(this.timer)
  this.play()
 }
 })

7.实现自动播放功能 better-scroll也提供了一个接口goToPage(x, y, time, easing) 顾名思义也就是转到对应页面 其中几个参数分别代表 x表示横向页面 y表示纵向页面 time表示动画执行时间 easing一般不建议修改 有了这个接口 其实就非常轻松了 我们只需要在methods里再写一个Play方法 具体的思路就是 通过currentPageIndex+=1得到下一张要播放的图片的索引 同时当索引值达到图片数组的长度的时候将要索引重新赋值为0就好了 并在页面渲染了以后调用就可以了

play: function () {
 let playPage = this.currentPageIndex + 1
 if (playPage === this.children.length - 2) {
 playPage = 0
 }
 setTimeout(() => {
 this.slider.goToPage(playPage, 0, 400)
 }, this.interval)
 }

这里也有个细节就是 当设置这个轮播图为循环滚动的时候 better-scroll会自动在头尾各克隆一份图片 所以长度需要减去2 这样就可以实现轮播图的自动播放了

总结

以上所述是小编给大家介绍的Vue项目中使用better-scroll实现一个轮播图自动播放功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2018-12-02

Vue 过渡实现轮播图效果

Vue 过渡 Vue 的过渡系统是内置的,在元素从 DOM 中插入或移除时自动应用过渡效果. 过渡的实现要在目标元素上使用 transition 属性,具体实现参考Vue2 过渡 下面例子中我们用到列表过渡,可以先学习一下官方的例子 要同时渲染整个列表,比如使用 v-for,我们需要用到 <transition-group> 组件 Vue 轮播图 我们先看这样一个列表 <ul> <li v-for="list in slideList"> <i

vue实现文字横向无缝走马灯组件效果的实例代码

marquee标签已经废弃了,只能手动实现文字走马灯样式 基于vue组件开发 <template> <div class="wrap"> // 外框,固定宽度 <div id="box"> // 内部滚动框 <div id="marquee">{{text}}</div> //展示的文字 <div id="copy"></div> // 文字副

Vue.js轮播图走马灯代码实例(全)

话不多说先上效果图,本文引荐链接https://www.jb51.net/article/129112.htm 这个是html, <template> <div> <div class="back_add"> <div class="threeImg"> <div class="Containt"> <div class="iconleft" @click=&q

Vue中如何实现轮播图的示例代码

这个功能我感觉在任何项目中都会涉及到,今天我就把我的实现方法跟大家分享一下,有不对的地方还请指出,我好更新. 下面是整体代码,我把轮播图单独做了一个组件,大家可以拿来就用,具体代码如下: <template> <div class="content"> <div class="focus"> <!-- focus begin --> <swiper :options="swiperOption"

vue实现图片滚动的示例代码(类似走马灯效果)

上次写了一个简单的图片轮播,这个相当于在上面的一些改进.这个组件除了可以进行图片滚动外,也可以嵌入任何内容的标签进行滚动,里面用了slot进行封装. 父: <template> <div id="app"> <er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/inde

vue.js整合mint-ui里的轮播图实例代码

初始化vue项目 npm install -g vue-cli vue init webpack demo # 中间会让你选npm yarn 等来安装依赖,我选的是yarn,因为它快些 安装mint-ui yarn add mint-ui mint-ui装好了,还要配置一下babel,方法跟着mint-ui的官方文档来配置就可以了 下面是我配置好的 .babelrc 文件,启动的时候会报跟es2015相关的错,装一下 babel-preset-es2015 就好了 { "presets"

vue2实现可复用的轮播图carousel组件详解

本文实例为大家分享了vue2实现轮播图carousel组件的使用方法,供大家参考,具体内容如下 1.千年老规矩,上效果图,说明功能: (1) 实现定时器,鼠标未移上图片时,自动轮播切换 (2) 有左右切换按钮,可切换至上一张.下一张 (3)有底部小图标,可自由切换至任意一张 github参考地址:https://github.com/chuanzaizai/vue_carousel 2.组件设计思路: (1)由于是可复用的子组件,图片的宽高.定时器间隔时间.轮播图list应由父组件传入 (2)定

vue.js实现简单轮播图效果

学习了vue.js也有一段时间了,做了个小demo来熟悉一下,很常见的demo,-------轮播图,没学vue之前的轮播图用JavaScript或者jquery都非常简单,发现用vue来写也挺有意思的.说下简单的思路,图片的轮播用v-if或者v-show来代替原来的Js滑动,过度效果用transition可简单实现,注意,滑动过程中是能看见两张图的,所以要用两个transition. (1)先写出整体的框架 <template> <div class="slide-show&

vue轮播图插件vue-awesome-swiper的使用代码实例

最近写vue2.0项目中用到了轮播图的一个插件,也就是vue-awesome-swiper,个人感觉还是比较强大的,swiper官网中的API及配置均可使用(支持3.0),以下说下使用该插件的一些步骤: 第一步安装 npm install vue-awesome-swiper --save 第二部在main.js中引入 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesom

基于vue.js轮播组件vue-awesome-swiper实现轮播图

一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u

Mint UI 基于 Vue.js 移动端组件库

官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引

atom-design(Vue.js移动端组件库)手势组件使用教程

介绍 atom-design经过几个月的开发,以及这段时间的修复bug,对js,css压缩,按需引入处理等等的性能优化,现在已经逐渐完善.做这套UI考虑到很多性能的问题,以及如何让开发者更自由.更简单的去使用.这篇文章主要讲使用Gesture(手势)相关组件的感受. Gesture(手势)相关组件 •Carousel(传送带) •SlideItem (滑动条) •Range (区域选择) •Pull Gesture (上下拉动手势) Carousel(传送带) import {Carousel}

vue.js的提示组件

这次的教程里,我们要把组件化进行到底!最近半年的几个项目中,都遇到了需要使用Toast或者Notification组件的情况.在目前已有的一些基于Vue.js开发的组件库,都没有找到太合适的,所以自己重头实现了一个.历经几个项目的磨练,这个提示组件的功能已经越来越完善,这次就分享一下组件以及其实现思路吧. GitHub 仓库: https://github.com/Yuyz0112/vue-notie Demo 地址: http://lab.myriptide.com/vue-notie/ 深入

解析Vue.js中的组件

介绍 在使用Vue.js时,Vue.js组件非常重要.在本教程中,我们将深入研究Vue.js组件,理解基础知识并将其应用于应用程序.让我们开始吧. 什么是组件? 组件使我们能够将 复杂的 应用程序分解成小块.例如,典型的Web应用程序将具有标题,侧边栏,内容和页脚等部分. Vue.js允许我们将每个部分分解成单独的模块化代码,称为组件.这些组件可以扩展,然后附加到 你 正在处理的应用程序. 使用 组件是 在 整个应用程序 编写 中重用代码的好方法. 假设 你 有一个博客应用程序,并且 你 想要显

vue.js项目 el-input 组件 监听回车键实现搜索功能示例

基于element-ui 组件 开发的vue.js项目, 实现回车键发起搜索,和原生的input 标签使用方法不一样: el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter <el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIc

vue.js内置组件之keep-alive组件使用

keep-alive是Vue.js的一个内置组件.<keep-alive> 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们.它自身不会渲染一个 DOM 元素,也不会出现在父组件链中. 当组件在 <keep-alive> 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行. 它提供了include与exclude两个属性,允许组件有条件地进行缓存. 举个栗子 <keep-alive> <router-view

详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持

本文介绍了详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持,分享给大家,具体如下: 一个小遗憾 能来看这篇文章的想必不用我来介绍vue是什么了.先让我们膜拜大神!vue项目的创建者尤大写了个sublime下语法高亮的插件,有人问他how about webstorm support?他是这么回答的.默哀一分钟. 添加高亮和语法支持 这个我是通过插件来实现的.网上目前有两个插件: 插件1:https://github.com/henjue/vue-for-idea 插件2:htt

JS框架之vue.js(深入三:组件1)

这个要单独写,原文是这么描述vue的组件的:组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 这个特性我感觉比较难理解,一步步来,看看组件到底是个什么东西? 1.举个栗子 //model层: // 通过extend方式定义一个Vue组件 var MyComponent = Vue.exten

vue.js实例对象+组件树的详细介绍

vue的实例对象 首先用js的new关键字实例化一个vue el: vue组件或对象装载在页面的位置,可通过id或class或标签名 template: 装载的内容.HTML代码/包含指令或者其他组件的HTML片段,template将是我们使用的模板 **data:** 数据通过data引入到组件中 在组件中的data要以函数的形式返回数据,当不同的界面用了同一个组件时,才不会以为一个组件的值发生改变而改变其他页面的内容. {{ }} 双括号语法里面放入数据的变量 组件注册语法糖 全局组件 A方

vue.js单文件组件中非父子组件的传值实例

最近在研究vue.js,总体来说还算可以,但是在web开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助! 在官网api中的这段讲解很少,也很模糊:官网中说明如下: 非父子组件通信: 有时候两个组件也需要通信 (非父子关系).在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线: var bus = new Vue(): // 触发组件 A 中的事件 bus.$emit('id-selected', 1) // 在组件 B 创建的钩子中