如何在Vue项目中使用better-scroll实现一个轮播图播放功能 - 行业资讯

　　介绍

如何在Vue项目中使用better-scroll实现一个轮播图播放功能?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

<强>思路

1。首先要确定自己的HTML结构基本结构就是一个包装包含一个内容

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

<强>滚动原理

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

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

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

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

& lt; div 类=皊lider" 　　,,ref=皊lider"的在　　,& lt; div 类=皊lider-content" 　　ref=才能“sliderContent"祝辞　　,& lt; slot> & lt;/slot> 　　,& lt;/div> 　　& lt;/div>

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

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

道具:,{ 　　,//是否循环播放　　,循环:{ 　　,类型:布尔, 　　,默认值:真的　　}, 　　,//是否自动播放　　,播放:{ 　　,类型:布尔, 　　,默认值:真的　　}, 　　,//播放间隔　　,间隔:{ 　　,类型:数字, 　　,默认值:3000 　　,} 　　以前,}

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

安装:,function (), { 　　,setTimeout((),=祝辞,{ 　　,this.setSliderWidth () 　　,this.initSlider () 　　,},20)

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

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

//,设置滑块的宽度　　,setSliderWidth: function (isResize), { 　　,//获取滑块里的所有的子元素　　this.children =,这。refs.sliderContent.children美元　　,//console.log (this.children) 　　,//计算宽度,=,图片个数+每张图片的宽度　　,let width =0 　　,//获取手机屏幕的宽度　　,let sliderWidth =, refs.slider.clientWidth美元　　, 　　,for (let 小姐:=,0;,小姐:& lt;, this.children.length;,我+ +),{ 　　,//获取孩子里的每一项内容, 　　,let child =, this.children[我] 　　,=,,child.style.width sliderWidth +, & # 39; px # 39; 　　width +=,输入sliderWidth 　　,} 　　,if (this.loop), { 　　+=,width 2, *输入sliderWidth 　　,} 　　这。refs.sliderContent.style.width 美元;=,width +, & # 39; px # 39; 　　以前,}

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