执着于理想,纯粹于当下

目录
新版bscroll轮播图无缝切换
/    

新版bscroll轮播图无缝切换

  用 bscroll 手写一个轮播图,过程中遇到了很多坑,最主要的原因是 bscroll 新旧版本造成的。新版本中的一些调用方式、属性和旧版本的有差别。接下来是思路:

一、基本雏形

创建轮播图组件(slider)
  slider 表示最外层容器,slider 中包含 slider-group 和 dots。slider-group 表示轮播的具体内容和 dots 表示图中的小圆点。

<div class="slider" ref="slider">
      <div class="slider-group" ref="sliderGroup">
        <slot></slot>
      </div>
      <div class="dots">
        <span class="dot" v-for="(item, index) in dots" :key="index" :class="{active: currentPageIndex === index}"></span>
      </div>
    </div>

  紧接着我们把 CSS 样式设置一下,slider-item 后续需要动态添加,图片用 a 标签包裹起来,这样可以跳转链接

 .slider
    min-height: 1px
    .slider-group
      position relative
      overflow hidden
      white-space nowrap
      .slider-item
        float left
        box-sizing border-box
        overflow hidden
        text-align center
        a
         display block
         width 100%
         img
          display block
          width 100%
    .dots
      position absolute
      left 0
      right 0
      text-align center
      font-size 0
      bottom 12px
      transform translateZ(1px)
      .dot
        display inline-block
        margin 0 4px
        width 8px
        height 8px
        border-radius 50%
        background: hsla(0,0%,100%,.5)
        &.active
         width 20px
         border-radius 5px
         background: hsla(0,0%,100%,.8);
          

二、动态添加 class 样式

  这里封装的方法是为了添加 slider-item 方法

export function addClass (el, className) {
  if (hasClass(el, className)) {
    return
  }
  let newClass = el.className.split(' ')
  newClass.push(className)
  el.className = newClass.join(' ')
}
export function hasClass (el, className) {
  let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
  return reg.test(el.className)
}

三、设置组件的属性

    props: {
      loop: {
        type: Boolean,
        default: true // 设置循环状态
      },
      autoPlay: { // 自动播放
        type: Boolean,
        default: true
      },
      interval: { // 轮播时间间隔
        type: Number,
        default: 4000
      }
    },

四、逻辑部分

  在 mounted 中依次调用这四个函数。为了保证在 dom 已经完全生成了,采用 setTimeout 设置一个 20ms 的延时,因为浏览器刷新一次的速度在 17ms 左右。并且在父组件调用的时候,记得加上 v-if="recommends.length"进行限制。

mounted () { // mounted钩子函数,初始化better-scroll
      setTimeout(() => { // *页面刷新的时间在17ms左右,所以设置延时20ms,等待dom加载完成*
        this._setSliderWidth() // 初始化  设置容器宽度
        this._initDots()
        this._initSlider() // 初始化 bscroll
        if (this.autoPlay) {
          this._play()
        }
      }, 20)
    },

五、methods 函数

  1. _setSliderWidth-----> 设置每个轮播内容的宽度、设置轮播内容的父组件的宽度
 _setSliderWidth() {
        this.children = this.$refs.sliderGroup.children
        let width = 0
        let sliderWidth = this.$refs.slider.clientWidth
        for (let i = 0; i < this.children.length; i++) {
          let child = this.children[i]
 //addClass是一个封装好为元素添加类名的函数,为字节点添加类名为slider-item 的类,进行CSS部分的渲染
          addClass(child, 'slider-item')
          child.style.width = sliderWidth + 'px'
          width += sliderWidth
        }
 //如果是循环播放并且是首次初始化时,需要再加上头尾两个重复图片的宽度。而当浏览器调整大小的时候,父元素中的子元素已经包含了首位重复图片的元素,因此不需要进行宽度的增加。     
        if (this.loop) {
          width += 2 * sliderWidth
        }
        this.$refs.sliderGroup.style.width = width + 'px'
      },
  1. _initDots----> 初始化 dots 的个数
 _initDots () {
        this.dots = new Array(this.children.length)
 },
  1. _initSlider-----> 创建和配置一个 better-scroll 的实例、在 bscroll 的 scrollEnd 事件中进行当前 index 的计算、重置定时器从当前页开始自动播放
 _initSlider () {
        this.slider = new BScroll(this.$refs.slider, { 
        //创建BScroll实例,并设置配置项
          scrollX: true,
          scrollY: false,
          momentum: false,
          click: true,
          // 改版之后的写法
          snap: {
            loop: this.loop,
            threshold: 0.3,
            speed: 400
          }
        })
        this.slider.on('scrollEnd', () => {
          let pageIndex = this.slider.getCurrentPage().pageX //获取轮播到的当前页
        // 新版改进,不需要此代码
          // if (this.loop) {
          //   pageIndex -= 1
          // }
          this.currentPageIndex = pageIndex
          if (this.autoPlay) {
            clearTimeout(this.timer) //清除定时器
            this._play()
          }
        })
      },
  1. _play----> 计算轮播的当前页、调用 Bscrol 的 gotopage 进行自动轮播

   旧版用的 goToPage(x, y, time, easing),新版用 next()

_play () {
        // let pageIndex = this.currentPageIndex + 1
        this.timer = setTimeout(() => {
          this.slider.next(400)
        }, this.interval)
 }

六、关于视口改变

window.addEventListener('resize')通过监听窗口改变事件,解决当窗口改变时,图片的宽度未发生改变的问题

 window.addEventListener('resize', () => {
        if (!this.slider){
          return
        }
        //窗口改变,重新调用_setSliderWidth()方法
        this._setSliderWidth(true)
        //计算完宽度,重新计算 this.slider
        this.slider.refresh()
      })

标题:新版bscroll轮播图无缝切换
作者:JaneChelle
地址:https://xiao.algerfan.cn/articles/2019/10/19/1571446904210.html