基于手淘 flexible 的 Vue 组件：TextScroll -- 文字滚动

vue-flexible-components

基于手淘 flexible.js 的 Vue 组件

前言：

• 目前手头的移动端Vue项目是用手淘的 lib-flexible 作适配的，并用 px2rem 来自动转换成rem。关于lib-flexible和px2rem的配置，请移步 vue-cli 配置 flexible。
• 由于使用rem作适配，导致现有的很多移动端UI框架不能与之很好的配合，往往需要大动干戈更改UI框架的样式，背离了使用UI框架达到快速开发的初衷。
• 为了以后项目的组件复用，以及提高开发可复用组件的能力，特把平时项目中常用的、简单的 组件单独拎出来。
• 此为小白之作，论代码质量、难易程度、复用度，远不及各位大佬之杰作，求轻喷。同时，也恳请各位，提出意见和建议，不胜感激！
• GitHub地址：vue-flexible-components

TextScroll -- 文字滚动

• 效果展示

   
  

 

• 代码分析

  利用vue的列表过渡 transition-group来进行动画渲染。滚动元素都是相对于滚动视口绝对定位，利用定时器循环更改当前显示索引，配合Vue的过渡属性，达到这种滚动效果。

  • dom结构

    <div class="TextScroll">
        <transition-group tag="ul" :name="scrollType">
          <li
            v-for="(item,index) in dataList"
            :key='index'
            v-show="index==count"
          >
              <!-- <router-link to=""> -->
                  <p>{{item.text}}</p>     // 因各项目数据结构不一样，需手动修改此处结构和属性值
              <!-- </router-link> -->
          </li>
        </transition-group>
    </div>

  • data数据

    data() {
        return {
            count: 0, // 当前索引  当v-for中的index等于count时 v-show=true 即显示当前元素
            intervalId: null, // 定时器ID
            playTime: 2000, // 定时器执行间隔
    
        }
    },

  • methods方法

    methods: {
        getText() {
            let len = this.dataList.length; // 获取数组长度
            if (len == 0) {
                return // 当数组为空时，直接返回
            }
            if (this.count == len - 1) { // 当前为最后一个时
                this.count = 0 // 从第一个开始
            } else {
                this.count++ // 自增
            }
        }
    },

  • created时开启定时器执行上面的方法

    created() {
        this.intervalId = setInterval(()=>{ // 定义定时器
            this.getText();
        }, this.playTime)
    },

  • destroyed 时清除定时器，尤其spa页面要注意，否则会一直跑下去

    destroyed() {
        clearInterval(this.intervalId) // 清除定时器
    }

  • CSS 样式。还是比较重要的，想要什么样的动画效果，全靠这来控制

    /* 向上滚动动画 */
    .scroll-up-enter-active,
    .scroll-up-leave-active{
        transition: all .5s ease;
    }
    .scroll-up-enter{
        transform: translate3d(0,100%,0);
    }
    .scroll-up-leave-to{
        transform: translate3d(0,-100%,0);
    }
    
    
    
    /* 向上匀速滚动动画 */
    .scroll-up-linear-enter-active,
    .scroll-up-linear-leave-active{
        transition: all 1s linear;  /*此时间必须和 playTime 保持一致*/
    }
    .scroll-up-linear-enter{
        transform: translate3d(0,100%,0);
    }
    .scroll-up-linear-leave-to{
        transform: translate3d(0,-100%,0);
    }
    
    
    
    /* 向左滚动动画 */
    .scroll-left-enter-active,
    .scroll-left-leave-active{
        transition: all 1s ease;
    }
    .scroll-left-enter{
        transform: translate3d(100%,0,0);
    }
    .scroll-left-leave-to{
        transform: translate3d(-100%,0,0);
    }
    
    
    
    /* 向左匀速滚动动画 */
    .scroll-left-linear-enter-active,
    .scroll-left-linear-leave-active{
        transition: all 4s linear;   /*此时间必须和 playTime 保持一致*/
    }
    .scroll-left-linear-enter{
        transform: translate3d(100%,0,0);
    }
    .scroll-left-linear-leave-to{
        transform: translate3d(-100%,0,0);
    }

• 使用说明

   

  • 组件地址：src/components/TextScroll.vue （不能npm，只能手动下载使用）

  • 下载并放入自己项目中 —— import 引入组件 —— components中注册组件 —— 使用

  • props

    props	说明	类型	可选值	默认值
    dataList	滚动文字数据 (由于数据结构不同，需更改组件内的dom结构)	Array		[ ]
    scrollType	滚动效果	String	'scroll-up''scroll-up-linear''scroll-left''scroll-left-linear'	'scroll-up'

  • 示例

      <text-scroll
          :dataList="data"
          scrollType="scroll-up"
      >
      </text-scroll>

• 存在问题

   

  • 复用性差

    虽说作了简单的封装，但是复用性还是比较差。比如：对dataList的处理比较粗糙，由于每个项目的数据结构不同，每次需手动修改组件内的dom结构。水平有限，暂时还想不出不用修改组件dom结构的方法，实现高度复用性。
     

  • PC 端，当滚动时，文字比较模糊

    尤其那两个匀速滚动，在pc上显示时，文字比较模糊，移动端稍微好些，难道是position:absolute导致的？可是不用这种定位方式又该怎么做呢？纠结中...
     

  • 样式叠加，错乱

    在pc端测试时，当浏览器打开多个窗口（其中一个是本组件展示页）。从本组件展示页切换到其它窗口，在其它窗口再回到此页面时，会发生短暂的样式错位，一两秒后又恢复正常。
    

     

• 结束语

  第一次封装Vue组件，战战兢兢,虽说是很简单的组件，到我手中也是问题不断。但是，我却很享受这个过程，因为我始终坚信，能力就是在不断探索中提高的，没有挫折，哪能进步！

  同时,也恳请各位大佬，对上述问题，提出意见和建议，祝我一臂之力，不胜感激！

  其它组件也将会在GitHub vue-flexible-components 中陆续更新，敬请关注。