vue-seamless-scroll 组件用法-区域内容滚动效果
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">
- </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 组件用法-区域内容滚动效果的更多相关文章
- Page Scroll Effects - 简单的页面滚动效果
Codyhouse 收集了一组页面滚动效果,就是目前大家很常见的用户在浏览网页的时候.一些效果虽然极端,但如果你的目标是创建一个身临其境的用户体验,他们是非常有用的.所有的动画都使用 Velocity ...
- Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
本博主在一次个人移动端项目中,遇到这么一个需求:希望自己的项目中,头部导航条的效果可以像今日头条那样,横向滚动! 对于这样的效果,在各大移动端项目中几乎是随处可见,为什么呢? 我们都知道,对于移动端也 ...
- vue 自定义过度组件用法
HTML: <div id="example-1"> <button @click="show = !show"> Toggle ren ...
- 分享vue ui时间组件用法
//js code var jiaban = { template:` <i-form v-ref:form_jb :model="form_jb" :rules=" ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- Flexslider - 响应式的 jQuery 内容滚动插件
FlexSlider 是一款轻量的响应式 jQuery 内容滚动插件,能够帮助你在项目轻松的创建漂亮的内容滚动效果.这款插件曾经连续多年入选 WDL 的年度最佳 jQuery 插件,值得大家在网站开发 ...
- jQuery实现的向下推送图文信息滚动效果
HTML 我们以新浪微博信息滚动为背景,html中包含了多条微博图文信息,结构如下: <div id="con"> <ul> <li> < ...
- MUI开发APP,scroll组件,运用到区域滚动
最近在开发APP的过程中,遇到一个问题,就是内容有一个固定的头部和底部. 头部就是我们常用的header了,底部的话,就放置一个button,用来提交页面数据或者进入下一个页面等,效果 ...
- VUE移动端音乐APP学习【四】:scroll组件及loading组件开发
scroll组件 制作scroll 组件,然后嵌套一个 DOM 节点,使得该节点就能够滚动.该组件中需要引入 BetterScroll 插件. scroll.vue: <template> ...
- Vue开发组件之替代marquee标签,超出宽度文字横向滚动效果
一.npm 安装 如果你想安装插件(自己写的)安装 install dependencies npm i marquee-components 使用 在main.js引入 import marquee ...
随机推荐
- 【vite】踩坑,首次点击路由跳转页面,发生回退,页面闪回,二次点击才能进入目标页面
[vite]踩坑,首次点击路由跳转页面,发生回退,页面闪回,二次点击才能进入目标页面 最近在做移动端前端项目,使用的vite3+vue3+vant,组件和api挂载,使用的自动导入,unplugin- ...
- quasar打包时:Module not found: Can't resolve imported dependency "dayjs/plugin/customParseFormat"
运行quasar build -m electron 后,报错如下: 看了这篇webpack 编译 element-plus 报错后,找到了报错的根源所在 于是,在quasar官方文档找到了针对web ...
- LOJ.数列分块入门3
题目 分析 由大题目知此题分块 注意处理前驱下标的合法性 \(Code\) #include<cstdio> #include<cmath> #include<algor ...
- 基于GLUT的PyOpenGL的使用
1. GLUT概述 OpenGL只是一种规范,不仅语言无关,而且平台无关.规范只字未提获得和管理OpenGL上下文相关的内容,而是将这些作为细节交给底层的窗口系统.出于同样的原因,OpenGL纯粹专注 ...
- PostgreSQL 打印详细错误调用栈 - pg_backtrace
一.用法 create extension pg_backtrace; select pg_backtrace_init(); 二.示例 postgres=# select count(*)/0.0 ...
- 剖析flutter_download_manager学习如何做下载管理,暂停和取消
前言 内容类应用中图片或文件下载,一般应用中应用更新和升级,这些都是经典的下载场景.下载是项目中基础且重要的模块. 从代码逻辑复用性和人力成本考虑,一直想实现一个纯Dart实现的下载库,作为技术储备. ...
- linux常用操作指令记录
https://maker.pro/linux/tutorial/basic-linux-commands-for-beginners ## 打开终端 ## **Ctrl+Alt+T** ## ls ...
- mybatis动态标签——sql标签
mapper接口 Emp getEmpById(@Param("id") Integer id); mapper.xml <!-- sql片段:可以记录一段sql,在需要用的 ...
- Python控制台输出字体颜色及背景设置
python 可以利用命令输出带有特效的控制台字体 基础语法 Python利用'\033[<style CODE>;<fore color CODE>;< back co ...
- 向mysql插入数据报错 pymysql.err.DataError: (1406, "Data too long for column 'class' at row 1") 解决方案
这个问题一开始更换数据类型或者数据类型的大小,发现还是不行.后面通过网上查询了一条神奇的sql语句分分钟钟的解决了 问题原因明明是: 字段的长度不够存放数据 解决方案: 在mysql命令行输入如下:S ...