vue webapp之music（五）轮播图组件实现

最新推荐文章于 2024-06-18 11:56:32 发布

翟敏1201

最新推荐文章于 2024-06-18 11:56:32 发布

阅读量449

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/chaitong2204/article/details/81433800

版权

VUE 专栏收录该内容

44 篇文章 2 订阅

订阅专栏

本文介绍如何在Vue的web应用程序中创建一个音乐推荐页面的轮播图组件。通过新建base目录存放基础组件，引入轮播组件并存放请求到的数据，结合better-scroll库实现图片滚动效果。在实现过程中，需要处理异步数据加载的问题，并在轮播组件中计算图片宽度，确保组件正确渲染。

摘要由CSDN通过智能技术生成

1.新建base目录（用来存放基础组件）

2.在recommend组件引入轮播组件

3.将请求到的数据存放到data中

4.将轮播组件插入

5.使用better-scroll做图片滚动

https://github.com/ustbhuangyi/better-scroll

https://zhuanlan.zhihu.com/p/27407024

以上两个是对better-scroll的详细介绍

(1)安装cnpm install better-scroll --save

(2)在recommend引入better-scroll

6.新建dom.js，用来存放dom相关的代码

export function addClass(el, className) {
  //el dom对象
  if (hasClass(el, className)) {
    return
  }
  let newClass = el.className.split(' ')
  newClass.push(className)
  el.className = newClass.join(' ')
}
//判断是否有className
export function hasClass(el, className) {
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
  return reg.test(el.className)
}

7.在轮播组件中计算轮播图片的宽度

刷新页面发现轮播图样式还是不对，这是因为数据请求是异步操作，没有获取到数据时已经开始渲染页面，所以应该加一个判断

确保有数据之后再开始渲染

8.初始化slider

 _initSlider() {
      this.Bscoll = new Bscoll(this.$refs.slider, {
        scrollX: true, //横向滚动
        scrollY: false,
        momentum: false,//惯性
        snap: true,
        snapLoop: this.loop, //循环
        snapThreshold: 0.3,
        snapSpeed: 400,
        click: true
      })

轮播组件在这里不详细写了，网上有很多组件可以直接拿来用