写在前面:这次会讲一些难点,关于betterScroll组件方面的东西。
1
jsonp方面,暂时先跳过把
2
轮播图的实现,我们这里用betterScroll组件来构造这个轮播图,把轮播图组件放在base目录下的slider
slider组件的dom基本结构如下
这里要注意有一个slot,slot是vue中定义的插槽,跟java中的多态有点类似,你在外部调用组件的时候,如果在组件中添加了html代码,则代码会被渲染到
我们在recommend中使用这个组件(别忘了注册和引入)
在插槽中遍历轮播图数据,然后效果如下图
我们发现样式不对,去修改它。
我们要从外部控制轮播的几个功能,比如自动轮播,循环轮播等,所以我们给slider组件设置props
接下来我们用betterScroll来实现轮播
使用betterScroll最重要的一点就是渲染的时机。什么时候渲染最好呢？是在mounted的时候,所有dom元素全部都挂载完成的时候初始化。但是mounted不能保证所有的dom全都渲染,我们需要在nextTick或者setTimeout() 17ms。注意看注释！
因为我们是横向滚动,所以在初始化之前我们需要知道slider的宽度。使用setSliderWidth()函数来实现
计算到slider父元素的宽度(它是被图片撑开的),轮播的时候需要加两张图片的宽度保证轮播的流畅性,每一张图片的宽度等于父容器的宽度。这么做是因为slider的宽度默认是视图宽度,即innerWidth,而图片的宽度可能比他大,所以我们要让图片的宽度跟slider一样大。
接下来我们来注册Bscroll
好了 我们弄完了Bscroll,开始写下面那几个小点点。
有几张图片就有几个小点点。所以我们先获取图片的数目,但是因为初始化Bscroll的时候增加了两个元素,所以我们初始化小点点要在bscroll之前。
在滚动结束,触发end的时候,获取当前的currentIndex,如果currentIndex跟小点点的index相同,则增加active类名
接下来开始写自动播放,我们设置一个定时器,让它每隔多少时间跳到下一个元素去，
这里用的是timeout,少用interval,因为性能不好。因为timeout只有一次,所以我们要是想多次轮播就要多次在initSlider()方法中调用_play()方法.
之所以要先清除定时器,是因为如果你不清楚它,在自动轮播到快到结尾的时候 你用手滑了一下,会出现两个定时器,这样会互相干扰。
好了,在完成上面的步骤之后,slider基本上已经完成了。但是现在还有一个小问题,如果我们改变窗口大小,slider大小也会改变,但是我们只初始化了一次，所以会有bug。这样我们就需要加一个监听器,来监听页面变化。但是这里也分为两种情况,第一种是初始化的时候,第二种情况是未初始化。
第一种情况需要多加两个图片宽度,第二种不用,用一个isresize位判断,当第二种情况时重新计算sliderGroup并刷新slider