在Vue项目中使用better-scroll来实现轮播地图的自动回放功能

前言

Better-scroll是一个非常非常强大的第三方库。在移动端使用这个库不仅可以达到与原生ScrollView非常相似的效果，还可以达到轮播的效果。在这里，我们先记录一些实现这种效果的过程。

思路

1.首先，你必须确定你的HTML结构。基本结构是包装器包含内容

2.其次，页面可以滚动的原理是，当内容的高度超过容器的高度时，页面可以滚动。如果没有超过，就不用滚动了。因此，首先需要实现的一点是获得所有内容的高度。因为是轮播图，整个页面应该是这样想象的。

滚动原理

这里可以清楚地看到，当页面的横向宽度超过视口的宽度时，可以实现滚动。综上所述，可以看出实现横向轮播最重要的一点就是宽度，所以我们首先需要获得的就是整个轮播的宽度

3.由于它是一个转盘，用户还需要知道当前正在播放哪些图片，即常见的“白点”数量。白点的数量用于告诉用户总共有多少张图片，以及当前正在播放哪些图片。一些图片可以给白点添加一些特殊的样式来通知用户

4.轮播还需要一些通用属性，比如页面渲染后的自动播放和播放间隔。另一个是是否支持圆形转盘

理清思路后，就可以开始工作了。1.改进HTML结构。事实上，代码非常简单，即创建两个div并添加ref引用可以很容易地通过ref属性获取上下文

div class=' slider ' ref=' slider ' div class=' slider-content ' ref=' slider content ' slot/slot/div/div这里使用了vue中非常常见的slot，这样当我们在外部调用这个slider组件时，就可以很容易地从外部传入一些子组件

2.如上所述，控制滑块的一些属性需要在组件的道具中接受，这样我们就可以方便地在外部控制这些属性

prop : {//是否循环播放： {type :布尔值，default: true}，//是否自动播放autoplay 3360 {type:布尔值，default3360 true}，//播放间隔间隔间隔： { type :数字，默认： 3000}} 3。在一些初始步骤差不多完成之后，我们需要使用一个挂载在vue的生命周期钩子，也就是在页面渲染之后，我们可以得到轮播的宽度，并初始化轮播的一些设置。

mount ed : FuncTion(){ settimeout()={ this。setsliderwidth()这个。initslider ()}，20)这里有一个小提示，就是浏览器渲染dom通常需要17ms，所以这里使用了一个延时函数，在20ms后调用这些方法，也就是保证浏览器dom正确渲染，防止出现一些问题。

4.上面只调用了这个方法，但是这些方法还没有实现。首先，在设置宽度的方法中，我们需要通过$refs.sliderContent获取上下文，通过$refs.slider.clientWidth方法获取当前屏幕宽度，然后遍历这个容器，获取容器中的所有内容。同时，将获得的内容的宽度设置为此屏幕的宽度。最后，所有内容的宽度可以相加，得到整个滑块的宽度。说了这么多，感觉很绕弯子，我们来看看代码。

//设置slider set slider wid : function(is resize){//获取此滑块中的所有子元素。孩子=这个。参考文献。slidercontent。children//console . log(this . children)//计算宽度=图片数，每张图片的宽度，让宽度=0 //获取手机屏幕的宽度，让滑块宽度=this。$ refs.slider.clientwidth for(让I=0；I this . children . long；I){//get children中的每一项让child=this。children [I] child.style.width=滑块宽度' px' width=滑块宽度} if (this。loop) {width=2 * Sliderwidth}这个。$ refs . slidercontent . style . width=width ' px ' }然后我们得到整个滑块的宽度。还有一个细节就是当它是循环的时候，better-scroll会在头尾克隆两个副本，所以需要宽度*下一步是实现better-scroll的一些初始化，具体参数配置好了，可以从better-scoll官网查询，这里就不赘述了。

//初始化slider init slider :函数(){this。滑块=新的b滚动(这。参考文献。滑块，{scrollx: true，scrolly: false，momentum: false，snap: { loop: this.loop，threshold: 0.3，speed: 400 }，click : true })5。实现以上两种方法后，在页面上基本可以看到轮播，大概是这样的。但是写完这个，你会发现没有办法自动轮播轮播，当前显示的几个图片的样式显示不正确，所以下一步就是实现这两个方法。ps:这里请求QQ音乐横幅界面文件的图片数据源是什么？

旋转木马的效果

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

Div class=' dots ' span class=' dot ' v-for='(item，index)of dots ' : class=' { active : current pageindex===index } ' : key=' index '/span/Div表示我们通过下标绑定样式，并监听更好滚动的' scrollEnd '事件。当滚动结束后，我们调用getCurrentPage()，它会有一个返回值pageX，即水平滚动哪个页面，并将这个返回值赋给currentPageIndex，达到正确显示样式的目的。

this.slider.on('scrollEnd '，()={let page=this。滑块。getcurrentpage()。佩吉克斯特。current page index=page//如果滚动后自动播放，首先清除定时器(防止手动拖动轮播后图片显示不正确)然后再次执行该方法实现轮播if (this。自动播放){cleartimeout(这。计时器)这个。play ()}}) 7。更好的实现自动播放功能——scroll还提供了一个界面goToPage(x，Y，time，easing)顾名思义就是去对应的页面，其中几个参数表示X为水平页面Y为垂直页面时间为动画执行时间easing一般不建议修改。有了这个界面，其实很容易。我们只需要在方法中编写另一个Play方法。具体思路是通过currentPageIndex=1得到下一张要播放的图片。同时，当索引值达到图片数组的长度时，最好将索引重新分配为0，并在页面呈现后调用它

play:函数(){让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实现了转盘的自动播放功能，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！