vue上下轮播组件简单实现

约定不等于承诺〃 2021-09-15 12:12 631阅读 0赞

在vue社区里面没有找到特别好的上下轮播插件，基本都是图片的左右播放插件，质量也是参差不齐

在实现这个组件之前，先抛出一个问题，如何在vue中实现dom的环形结构?

![70][]

首先来看轮播组件的思路

红色部分：相当于放映机，也就是容器，overflow：hidden

绿色内容：相当于胶片，也就是dom

当放映机从上往下移动的时候，从视觉上看，就像是胶片在从下往上放映，ok，播的核心思路解决了。

现在的问题是怎么轮？

传统的jq控制dom的思想，你可以在第一张胶片移出放映机区域的时候，动态移动到最后一张胶片的后面，依此类推，形成了一个dom的环形结构。

那么在vue中如何用v-if v-show去实现这个环形结构呢？在不破坏文档流的情况下，暂时还没想到好的解决方案（所有子元素用绝对定位可以解决，动态计算所有子元素的position，这样破坏了文档流，不予考虑）

在vue的传统中，这个问题怎么解决呢？

1.数据驱动模板

vue的核心之一，数据驱动模版，循环播放映射的数据上

就是 \[1,2,3,4,5,6\] ---》\[2,3,4,5,6,1\] ---》 \[3,4,5,6,1,2\]

ok,通过改数据来实现循环播放的思路有了，就是把数组的头移动到数组的尾巴去，很简单

//这方法被窝删了，随意手打一下
    setInterval(function(){
      arr.push(arr[1]) //先加一个到尾巴
      arr.shift() //然后去个头
    },3000)

2.投机取巧

上面的方法有个很难搞定的地方，就是动画，数据掐头"去"尾后，dom重新生成了，那动画怎么办？

回归传统

先实现放映机向下移动的方式（用transition，tranform等等）

为了能实现循环，将胶卷复印一份跟在原先的尾部，这样放映机移动到最后一张胶卷的时候，仍能保证后面跟着第一张、第二张....看起来像是ending - > begin

最关键的就是如何处理临界点，也就是如何实现"dom的环形结构"

刚才已经说了，没想出来，所以当放映机放到最后一张的时候，作为放映员的你，就突然关闭了物理世界运动轨迹的规则，就把第一张胶卷，一下子，注意这个一下子！你就一下子把第一张复位了，同时取消这个运动轨迹，也就是通过设置transition的动画时间，当动画时间为0的时候，肉眼就捕捉不到这个改变了，天知地知你知我知，看得人都不知道。

说了这么多，看简单版本的代码如下：

复杂版本代码如下：

<template>
      <div :style="{height:height*lineNum + 'px'}" class="rollScreen_container" id ="rollScreen_container">
        <ul class="rollScreen_list" :style = {transform:transform} :class="{rollScreen_list_unanim:num===0}">
          <li class="rollScreen_once" v-for="(item,index) in contentArr" :key=index :style="{height:height+'px',lineHeight:height+'px'}">
            <span>{
       {item}}</span>
          </li>
          <li class="rollScreen_once" v-for="(item,index) in contentArr" :key=index+contentArr.length :style="{height:height+'px',lineHeight:height+'px'}">
            <span>{
       {item}}</span>
          </li>
          <slot name="slide"></slot>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      props: {
        height: {
          default: 40,
          type: Number,
          required: true
        }, // 每行元素的高度
        lineNum: {
          default: 5,
          type: Number
        }, // 显示行数
        contentArr: {
          default: null,
          type: Array
        }, // 简单文本轮播
        dLength: {
          default: null,
          type: Number
        }, // 自定义插槽内容的时候必须传自定义内容的长度
        time: {
          default: 3000,
          type: Number // 定义轮播切换速度
        }
      },
      data: function () {
        return {
          num: 0,
          loopTime: this.time
        }
      },
      computed: {
        transform: function () {
          return 'translateY(-' + this.num * this.height + 'px)'
        }
      },
      beforeCreate: function () {
      },
      created: function () {
        let _this = this
        if ((this.contentArr != null && this.contentArr.length < this.lineNum) || (this.dLength != null && this.dLength < this.lineNum)) {
          console.error('轮播显示行数不能超过数据总行数')
        } else {
          // 先判断轮播切换速度，如果小于动画播放时间则提示切换速度过快
          if (_this.loopTime <= 1000) {
            console.warn('轮播切换速度过快，至少大于1s')
            _this.loopTime = 1000
          }
          // 两种轮播 第一种contentArr！= null 第二种自定义插槽
          if (_this.contentArr !== null) {
            setInterval(function () {
              if (_this.num !== _this.contentArr.length) {
                _this.num++
              } else {
                _this.num = 0
                setTimeout(function () {
                  _this.num++
                }, 50)
              }
            }, _this.loopTime)
          } else if (_this.dLength !== null) {
            setInterval(function () {
              if (_this.num !== _this.dLength) {
                _this.num++
              } else {
                _this.num = 0
                setTimeout(function () {
                  _this.num++
                }, 50)
              }
            }, _this.loopTime)
          } else if (_this.dLength === null && _this.dLength === null) {
            console.error('contentArr 和 dLength 均为空，rollScreen组件运行出错')
          }
        }
      },
      mounted: function () {
        // 复制一份slot的节点，如果直接用同名slot会报错
        if (this.dLength !== null) {
          for (let i = 0; i < this.dLength; i++) {
            this.$el.childNodes[0].appendChild(this.$slots.slide[i].elm.cloneNode(true))
          }
        }
      }
    }
    </script>
    
    <style>
      .rollScreen_container{
        display: inline-block;
        position:relative;
        overflow: hidden;
      }
      .rollScreen_list{
        transition: 1s linear;
        padding:0;
        margin:0;
        list-style: none;
      }
      .rollScreen_list_unanim{
        transition: none
      }
      .rollScreen_once{
        list-style: none;
      }
    </style>

[70]: /images/20210813/e1efb66b56974a39a29501121ae8da8c.png