轮播图组件开发
2018-08-24 本文已影响0人
xu丽_twilight
在base/slider文件夹下创建slider.vue文件并在recommend.vue文件中引入
slider.vue中的具体代码如下：
引入better-scroll实现轮播，首先npm install better-scroll --save,安装后在slider.vue中引入
在mounted生命周期函数中渲染better-scroll
在common/js/dom中添加以下内容，为引入的文件的dom添加样式，因为这部分内容比较通用，可能项目中的其它地方也会用到，所以把它抽离出来
在slider.vue中引入
因为是横向滚动所以要首先计算并设置横向滚动距离
应用better-scroll初始化轮播的代码如下
轮播图下面的小圆点的实现
利用better-scroll提供的方法将当前的pageIndex 赋值给currentPageIndex
实现自动轮播
解决切换不同设备时宽度不能自适应的问题
解决页面切换时，没必要的dom重新渲染问题（在app.vue中用keep-alive标签包裹router-view标签
