轮播图组件开发

在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标签




最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

友情链接更多精彩内容