1.滚动效果

2.代码

  1. <div class="page-container" style="">
  2. <vue-seamless-scroll :data="listData" :class-option="defaultOption">
  3. <ul class="ul-scoll">
  4. <li v-for="(item, index) in listData" :key="index">
  5. <span class="title">{{ item.title }}:</span
  6. ><span class="date">{{ item.time }}</span>
  7. </li>
  8. </ul>
  9. </vue-seamless-scroll>
  10. </div>
  11. <script>
  12. // 引入vue-seamless-scroll组件
  13. import vueSeamlessScroll from 'vue-seamless-scroll';
  14.  
  15. export default {
  16. name: 'Demo',
  17. components:{
  18. vueSeamlessScroll
  19. }
  20. data(){
  21. return {
  22. defaultOption: {
  23. step: 1, // 数值越大速度滚动越快
  24. limitMoveNum: 0, // 开始无缝滚动的数据量 this.dataList.length
  25. hoverStop: true, // 是否开启鼠标悬停stop
  26. direction: 1, // 0向下 1向上 2向左 3向右
  27. openWatch: true, // 开启数据实时监控刷新dom
  28. singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
  29. singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
  30. waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
  31. },
  32. listData: [],
  33. }
  34. },
  35. mounted(){
  36. for (let i = 0; i < 3; i++) {
  37. let j = {
  38. title: "无缝滚动序号index:" + i,
  39. time: this.$moment(new Date()).format('YYYY-MM-DD HH:mm'),
  40. };
  41. this.listData.push(j);
  42. }
  43. const len = this.listData.length;
    // 这里的目的是为了判断数组的长度是否超出了容器高度,如果超出了则进行无缝滚动,反之就不滚动。
  44. this.defaultOption.limitMoveNum = (len) * 40 > 200 ? len: len+1;
  45. console.log(this.defaultOption.limitMoveNum,len,'::>>>>>0000')
  46. },
  47. methods:{}
  48. }
  49. </script>
    <style lang="less">
  .page-container {
    width: 400px;
    height: 200px;
    overflow: hidden;
    border: 1px solid #283dff;
    .ul-scoll {
       li {
         height: 40px;
         line-height: 40px;
         background: rgba(198, 142, 226, 0.4);
       }
    }
   }
  1. </style>

3.使用方法

  1. 使用npm安装:
    npm install vue-seamless-scroll --save
    使用yarn安装:
    yarn add vue-seamless-scroll

    使用:
    注册组件:
    //全局注册 main.js文件
    import vueSeamlessScroll from 'vue-seamless-scroll';
    vue.use(vueSeamlessScroll);
    <script>
    //单个文件局部注册
      import vueSeamlessScroll from 'vue-seamless-scroll'
      export default {
      components:{
       vueSeamlessScroll
      },
    data(){
    return{
    listData: [
    {"title": "无缝滚动了","time": new Date()},
    {"title": "无缝滚动了","time": new Date()}
    ],
    classOption: {},
    }
    },
    methods:{

    }
      }
    </script>
    <template>
    <vue-seamless-scroll :data="listData" class="wrap" :class-option="classOption">
    <ul class="item">
    <li v-for="(item, index) in listData" :key="index">
    <span class="item.title">{{item.title}}</span>
    <span class="item.time">{{item.time}}</span>
    </li>
    </ul>
    </vue-seamless-scroll>
    </template>
    <style lang="less" scoped>
    .wrap{
    height: 270px;
    width: 400px;
    margin: 0 auto;
    overflow: hidden;
    li{
    list-style: none;
    padding:0;
    margin: 0;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    }
    }
    </style>

4.组件配置

  1. listData数据: 无缝滚动list数据。
    组件内部只关注listdata数组的length

    classOption:{
    step: 1,// 数值越大滚动速度越快,step值不建议太小,不然会有卡顿效果
    limitMoveNum:5,//开启无缝滚动的数据量
    hoverStop: true, //是否启用鼠标hover控制
    direction: 1, //方向 0往下 1往上 2向左 3向右
    openTouch: true, // 移动端开启touch滑动
    singleHeight: 0, //单步运动停止的高度(默认值0是无缝不停止的滚动),direction为0/1生效
    singleWidth: 0,//单步运动停止的宽度, direction为2/3生效
    waitTime: 1000, //单步停止等待时间
    switchOffset: 30, //左右切换按钮距离左右边界的边距px
    autoPlay: true, // 需要实现手动切换左右滚动的时候,必须设置autoPlay: false
    }

    回调事件:
    @ScrollEnd="handleScrollEnd"
    methods:{
    handleScrollEnd(){
    console.log()
    }
    }

    注意点:
    1.最外层容器需要手动设置 width, height, overflow:hidden;
    2.左右的无缝滚动需要给主内容区域(即默认slot插槽提供)设定合适的css width 属性,也可设置display:flex
    3.step值不建议太小,不然会出现卡顿效果
    4.需要实现手动切换左右滚动的时候,必须设置 autoPlay: false.

    复杂结构数组属性更新问题:
    vue-seamless-scroll组件中的list数据length无变化,仅仅是属性变更,手动调用组件内部的 reset方法即可。
    eg: this.$refs.seamlessScroll.reset();

参考链接:

官网文档地址:https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/

vue-seamless-scroll 组件用法-区域内容滚动效果的更多相关文章

  1. Page Scroll Effects - 简单的页面滚动效果

    Codyhouse 收集了一组页面滚动效果,就是目前大家很常见的用户在浏览网页的时候.一些效果虽然极端,但如果你的目标是创建一个身临其境的用户体验,他们是非常有用的.所有的动画都使用 Velocity ...

  2. Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条

    本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...

  3. vue 自定义过度组件用法

    HTML: <div id="example-1"> <button @click="show = !show"> Toggle ren ...

  4. 分享vue ui时间组件用法

    //js code var jiaban = { template:` <i-form v-ref:form_jb :model="form_jb" :rules=" ...

  5. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  6. Flexslider - 响应式的 jQuery 内容滚动插件

    FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...

  7. jQuery实现的向下推送图文信息滚动效果

    HTML 我们以新浪微博信息滚动为背景,html中包含了多条微博图文信息,结构如下: <div id="con"> <ul> <li> < ...

  8. MUI开发APP,scroll组件,运用到区域滚动

    最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部.         头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...

  9. VUE移动端音乐APP学习【四】:scroll组件及loading组件开发

    scroll组件 制作scroll 组件,然后嵌套一个 DOM 节点,使得该节点就能够滚动.该组件中需要引入 BetterScroll 插件. scroll.vue: <template> ...

  10. Vue开发组件之替代marquee标签,超出宽度文字横向滚动效果

    一.npm 安装 如果你想安装插件(自己写的)安装 install dependencies npm i marquee-components 使用 在main.js引入 import marquee ...

随机推荐

  1. 【vite】踩坑,首次点击路由跳转页面,发生回退,页面闪回,二次点击才能进入目标页面

    [vite]踩坑,首次点击路由跳转页面,发生回退,页面闪回,二次点击才能进入目标页面 最近在做移动端前端项目,使用的vite3+vue3+vant,组件和api挂载,使用的自动导入,unplugin- ...

  2. quasar打包时:Module not found: Can't resolve imported dependency "dayjs/plugin/customParseFormat"

    运行quasar build -m electron 后,报错如下: 看了这篇webpack 编译 element-plus 报错后,找到了报错的根源所在 于是,在quasar官方文档找到了针对web ...

  3. LOJ.数列分块入门3

    题目 分析 由大题目知此题分块 注意处理前驱下标的合法性 \(Code\) #include<cstdio> #include<cmath> #include<algor ...

  4. 基于GLUT的PyOpenGL的使用

    1. GLUT概述 OpenGL只是一种规范,不仅语言无关,而且平台无关.规范只字未提获得和管理OpenGL上下文相关的内容,而是将这些作为细节交给底层的窗口系统.出于同样的原因,OpenGL纯粹专注 ...

  5. PostgreSQL 打印详细错误调用栈 - pg_backtrace

    一.用法 create extension pg_backtrace; select pg_backtrace_init(); 二.示例 postgres=# select count(*)/0.0 ...

  6. 剖析flutter_download_manager学习如何做下载管理,暂停和取消

    前言 内容类应用中图片或文件下载,一般应用中应用更新和升级,这些都是经典的下载场景.下载是项目中基础且重要的模块. 从代码逻辑复用性和人力成本考虑,一直想实现一个纯Dart实现的下载库,作为技术储备. ...

  7. linux常用操作指令记录

    https://maker.pro/linux/tutorial/basic-linux-commands-for-beginners ## 打开终端 ## **Ctrl+Alt+T** ## ls ...

  8. mybatis动态标签——sql标签

    mapper接口 Emp getEmpById(@Param("id") Integer id); mapper.xml <!-- sql片段:可以记录一段sql,在需要用的 ...

  9. Python控制台输出字体颜色及背景设置

    python 可以利用命令输出带有特效的控制台字体 基础语法 Python利用'\033[<style CODE>;<fore color CODE>;< back co ...

  10. 向mysql插入数据报错 pymysql.err.DataError: (1406, "Data too long for column 'class' at row 1") 解决方案

    这个问题一开始更换数据类型或者数据类型的大小,发现还是不行.后面通过网上查询了一条神奇的sql语句分分钟钟的解决了 问题原因明明是: 字段的长度不够存放数据 解决方案: 在mysql命令行输入如下:S ...