1.滚动效果

2.代码

<div class="page-container" style="">
<vue-seamless-scroll :data="listData" :class-option="defaultOption">
<ul class="ul-scoll">
<li v-for="(item, index) in listData" :key="index">
<span class="title">{{ item.title }}:</span
><span class="date">{{ item.time }}</span>
</li>
</ul>
</vue-seamless-scroll>
</div>
<script>
// 引入vue-seamless-scroll组件
import vueSeamlessScroll from 'vue-seamless-scroll'; export default {
name: 'Demo',
components:{
vueSeamlessScroll
}
data(){
return {
defaultOption: {
step: 1, // 数值越大速度滚动越快
limitMoveNum: 0, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
},
listData: [],
}
},
mounted(){
for (let i = 0; i < 3; i++) {
let j = {
title: "无缝滚动序号index:" + i,
time: this.$moment(new Date()).format('YYYY-MM-DD HH:mm'),
};
this.listData.push(j);
}
const len = this.listData.length;
// 这里的目的是为了判断数组的长度是否超出了容器高度,如果超出了则进行无缝滚动,反之就不滚动。
this.defaultOption.limitMoveNum = (len) * 40 > 200 ? len: len+1;
console.log(this.defaultOption.limitMoveNum,len,'::>>>>>0000')
},
methods:{}
}
</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);
       }
    }
   }
</style>

3.使用方法

使用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.组件配置

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. Powershell获取当前文件夹内所有一级子文件夹大小

    需求:查看Windows某个文件夹所有一级子文件夹大小,并按照从大到小排序 解决方案:使用Powershell脚本 脚本内容如下 function filesize () {   [string]$f ...

  2. JZOJ 6801. NOIP2020.9.19模拟patrick

    题目大意 动态维护数列中大于等于某个数的极长连续段的个数. 思路 我们考虑每段的开头,记为 \(i\),高度为 \(a_i\) 那么此时水淹的高度必然满足 \(a_{i-1} < x \leq ...

  3. Linux 一次性创建多个文件

    创建多个文件,文件名数字编号是递增的,在文件名后面加上{n..m}: touch file-{1..10}.txt

  4. ASP.NET Core - 依赖注入(四)

    4. ASP.NET Core默认服务 之前讲了中间件,实际上一个中间件要正常进行工作,通常需要许多的服务配合进行,而中间件中的服务自然也是通过 Ioc 容器进行注册和注入的.前面也讲到,按照约定中间 ...

  5. 解决MSsql 中文变成"?"的问题

    ALTER DATABASE IMStest SET SINGLE_USER WITH ROLLBACK IMMEDIATE; ALTER database IMStest collate Chine ...

  6. pat 乙级1024 科学计数法关于stl中size()的一些思考即测试点六,无符号整数问题

    来,先看题目:1024 科学计数法 分数 20 作者 HOU, Qiming 单位 浙江大学 科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式 [+-][1-9].[0-9 ...

  7. Python ( 高级 第一部)

    目录 time 时间模块 Python的内置方法 数字模块 随机模块 序列化模块 pickle 序列化模块 json os 系统模块 os  shutil 模块 os,path 模块 文件压缩模块 z ...

  8. openssl国密算法库

    openssl国密算法库 一.开发背景 openssl是一个功能丰富且自包含的开源安全工具箱.它提供的主要功能有:SSL协议实现(包括SSLv2.SSLv3和TLSv1).大量软算法(对称/非对称/摘 ...

  9. Linux改密码失败authentication token manipulation error 的处理办法

    给root改密码时提示:passwd authentication token manipulation error 代表一是有可能是磁盘存储不足了,另一个原因是因为密码文件被赋予了特殊权限,不可被修 ...

  10. 前端回血day24 flex子项伤的CSS属性

    取值 含义 order 可以通过设置order改变某一个flex子项的排序位置.所有flex子项的默认order属性值是0 flex-grow 属性中的grow是扩展的意思,扩展的就是flex子项所占 ...