vue文本滚动组件

看了好多网上的文本组件,发现好多都有这样那样的问题；特别是滚动的时候失真的感觉，今天整合了文本滚动的方式用CSS的

animation写出一套组件；VUE项目直接用。感觉有用的朋友关注下

 

效果图，gif制作有卡顿，实际效果我是没发现卡顿

 

1. 横向文本滚动

/* 横向文本滚动 */
<template>
  <div class="scroll-inner" ref="scrollInner">
    <div class="scroll-wrap" ref="scrollWrap" :style="wrapStyle">
      <slot></slot>
    </div>
    <div class="scroll-wrap">
      <slot></slot>
    </div>
    <!-- <ul class="scroll-wrap">
      <li v-for="item in runArr" :key="item">
        {{item}}
      </li>
    </ul> -->
  </div>
</template>

<script>
/**
 * speed               1           速度
 *
 * 格式要求类名scroll、ul、li格式勿变，li内排版可自定义
 * <horizontal-text-scroll>
      <ul class="scroll">
        <li v-for="item in arr2" :key="item">
          {{item}}
        </li>
      </ul>
    </horizontal-text-scroll>
 */
export default {
  data () {
    return {
      runArr: [],
      wrapWidth: 0,
      innerWidth: 0,
      retry: 0,
      tim: Math.floor(Math.random() * (99999 - 10000) + 10000)
    }
  },
  props: {
    // 滚动速度
    speed: {
      type: Number,
      default: 1
    }
  },
  computed: {
    wrapStyle () {
      const s = this.wrapWidth / (30 + this.speed * 5)
      return {
        animationDuration: `${s}s`,
        animationIterationCount: 'infinite',
        animationName: `move${this.tim}`,
        animationTimingFunction: 'linear'
      }
    }
  },
  mounted () {
    this.getWrapWidth()
  },
  methods: {
    getWrapWidth () {
      this.$nextTick(() => {
        this.wrapWidth = this.$refs.scrollWrap.clientWidth
        this.innerWidth = this.$refs.scrollInner.clientWidth
        console.log(this.wrapWidth)
        console.log(this.innerWidth)
        if (!this.wrapWidth && this.retry < 3) {
          this.getWrapWidth()
          this.retry++
          return
        } else if (!this.wrapWidth && this.retry === 3){
          console.error('获取元素高度失败或高度为0')
          return
        }
        this.createStyle()
      })
    },
    createStyle () {
      const style = `
        @keyframes move${this.tim} {
          from {margin-left: 0;}
          to {margin-left: -${this.wrapWidth}px;}
        }
      `
      let el = document.createElement('style')
      el.innerHTML = style
      document.head.appendChild(el)
    }
  }
}
</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
}
.scroll-inner {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  height: 100%;
}
.scroll-wrap {
  box-sizing: border-box;
  min-width: 100%;
  height: 100%;
  font-size: 0;
  white-space: nowrap;
  display: inline-block;
}
.scroll-wrap li {
  height: 30px;
  line-height: 30px;
  list-style: none;
  display: inline-block;
  font-size: 16px;
  margin-right: 20px;
}
.scroll {
  display: inline-block;
}
</style>

2. 断点滚动

/* 间歇滚动 */
<template>
  <div class="scroll-inner">
    <ul class="scroll-wrap" :style="scrollWrapClass" v-bind="$attrs">
      <li v-for="(item, index) in runArr" :key="index">
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
/**
 * 根据inner标签的高度可控制单行多行
 *
 * scrollArr                       滚动数组
 * time                 2000       滚动间隔
 * animationTime        500        滚动动画时间
 * distance             30         滚动距离
 *
 */
export default {
  data () {
    return {
      isRun: false,
      runArr: []
    }
  },
  computed: {
    scrollWrapClass () {
      let c
      if (this.isRun) {
        c = {
          transition: `margin ${this.animationTime / 1000}s`,
          marginTop: `-${this.distance}`
        }
      } else {
        c = {
          transition: '',
          marginTop: ''
        }
      }
      return c
    }
  },
  props: {
    // 滚动数组
    scrollArr: {
      required: true
    },
    // 滚动间隔
    time: {
      type: Number,
      default: 2000
    },
    // 滚动动画时间
    animationTime: {
      type: Number,
      default: 500
    },
    // 滚动距离
    distance: {
      type: String,
      default: '30px'
    }
  },
  mounted() {
    this.runArr = JSON.parse(JSON.stringify(this.scrollArr ))
    document.addEventListener('visibilitychange', this.handleVisiable)
    this.startScroll()
  },
  methods: {
    startScroll () {
      this.interval = setInterval (() => {
        this.isRun = true
        this.runArr.push(this.runArr[0])
        this.timeOut = setTimeout (() => {
          this.runArr.shift()
          this.isRun = false
        }, this.animationTime)
      }, this.time)
    },
    handleVisiable (e) {
      if (e.target.visibilityState === 'visible') {
        // 要执行的方法
        this.startScroll()
      } else {
        this.interval && clearInterval(this.interval)
      }
    }
  },
  destroyed () {
    this.interval && clearInterval(this.interval)
    this.timeOut && clearTimeout(this.timeOut)
  }
}
</script>

<style scoped>
*{
  padding: 0;
  margin: 0;
}
.scroll-wrap {
  box-sizing: border-box;
}
.scroll-wrap li {
  height: 30px;
  line-height: 30px;
  list-style: none;
}
.scroll-inner {
  overflow: hidden;
}
.scroll-wrap.active {
  transition: margin 0.5s;
  margin-top: -30px;
}
</style>

3. 无缝滚动

/* 无缝滚动 */
<template>
  <div class="scroll-inner" ref="scrollInner">
    <ul class="scroll-wrap" v-bind="$attrs" :class="{canPause: canPause}" :style="wrapStyle" ref="scrollWrap">
      <li v-for="item in runArr" :key="item">
        {{item}}
      </li>
    </ul>
    <ul class="scroll-wrap" v-if="canRun">
      <li v-for="item in runArr" :key="item">
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
/**
 * scrollArr              滚动数组
 * speed          1       滚动速度
 * canPause       false    鼠标划过停止
 */
export default {
  data () {
    return {
      runArr: [],
      wrapHeight: 0,
      innerHeight: 0,
      retry: 0,
      canRun: true,
      tim: Math.floor(Math.random() * (99999 - 10000) + 10000)
    }
  },
  props: {
    // 滚动数组
    scrollArr: {
      required: true
    },
    // 滚动速度
    speed: {
      type: Number,
      default: 1
    },
    // 鼠标划过停止
    canPause: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    wrapStyle () {
      const s = this.wrapHeight / (20 + this.speed * 5)
      return {
        animationDuration: `${s}s`,
        animationIterationCount: 'infinite',
        animationName: `move${this.tim}`,
        animationTimingFunction: 'linear'
      }
    }
  },
  mounted () {
    this.runArr = JSON.parse(JSON.stringify(this.scrollArr))
    this.getWrapHeight()
  },
  methods: {
    getWrapHeight () {
      this.$nextTick(() => {
        this.wrapHeight = this.$refs.scrollWrap.clientHeight
        this.innerHeight = this.$refs.scrollInner.clientHeight
        if (!this.wrapHeight && this.retry < 3) {
          this.getWrapHeight()
          this.retry++
          return
        } else if (!this.wrapHeight && this.retry === 3){
          console.error('获取元素高度失败或高度为0')
          return
        }
        if (this.innerHeight >= this.wrapHeight) {
          this.canRun = false
          return
        }
        this.createStyle()
      })
    },
    createStyle () {
      const style = `
        @keyframes move${this.tim} {
          from {margin-top: 0;}
          to {margin-top: -${this.wrapHeight}px;}
        }
      `
      let el = document.createElement('style')
      el.innerHTML = style
      document.head.appendChild(el)
    }
  }
}
</script>

<style lang="less" scoped>
*{
  padding: 0;
  margin: 0;
}
.scroll-wrap {
  box-sizing: border-box;
}
.canPause {
  &:hover{
    animation-play-state: paused;
  }
}
.scroll-wrap li {
  height: 30px;
  line-height: 30px;
  list-style: none;
}
.scroll-inner {
  overflow: hidden;
  position: relative;
  height: 100%;
}

</style>