vue 文字左右上下循环滚动插件

diCommon

已于 2022-09-29 11:49:48 修改

阅读量2.1k

点赞数

分类专栏： vue js 文章标签： vue.js javascript 前端

于 2022-09-15 17:50:22 首次发布

本文链接：https://blog.csdn.net/u010613970/article/details/126876297

版权

js 同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

vue

9 篇文章 0 订阅

订阅专栏

本文介绍了如何使用vue-seamless-scroll插件来创建一个文字左右滑动的效果。首先通过npm安装插件，然后在页面中引入并配置组件。在js逻辑代码中设置数据和计算属性，最后在mounted生命周期钩子中初始化数据。css样式用于调整滚动条的样式和行为。该插件支持自定义滚动方向和数量，更多参数可以参考官方文档。

摘要由CSDN通过智能技术生成

前几天有个项目需要一个文字左右滑动的效果，为了方便，于是在网上查了一下是否有相关插件，最后还是被我找到一个小插件

首先是安装插件

npm install -s vue-seamless-scroll

插件安装后，在页面中引入

import vueSeamlessScroll from 'vue-seamless-scroll'

components： { vueSeamlessScroll }

html代码

<vue-seamless-scroll :data="webList" :class-option="optionLeft" class="seamless-warp2" :style="`width: ${divWidth}px`">
  <ul class="seamlessItem" :style="`width: ${divWidth}px`">
    <li v-for="item in webList" v-text="item.title"></li>
  </ul>
</vue-seamless-scroll>

js逻辑代码

data: {
  divWidth: 0,
  webList: []
}
computed: {
  optionLeft () {
    return {
      direction: 2,
      limitMoveNum: 2
    }
  }
},
mounted: {
  this.$nextTick(() => { // 在dom渲染完后,再执行动画
    this.divWidth = window.innerWidth;
    this.webList = [
        {
          title: '由于网站升级维护，大赛网站将于10月13日-10月22日期间临时关闭。'
        }, {
          title: '由于网站升级维护，大赛网站将于10月13日-10月22日期间临时关闭。'
        }
      ]
  })
}

css样式

.seamless-warp2 {
  overflow: hidden;
  height: 25px;
  width: 380px;
}
.seamlessItem {
  height: 25px;
  li {
    float: left;
    margin-right: 10px;
    color: #FFFFFF;
  }
}