基于手淘 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 中陆续更新,敬请关注。

相关文章
相关标签/搜索