1.下载

cnpm i --s vue-seamless-scroll

2.在main.js文件里引用

import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

<template><div><vue-seamless-scroll:data="tenList"class="seamless-warp":class-option="classOption"><ul class="tenCenter"><li v-for="(item, index) in tenList" :key="index"><p>{{ item.title }}</p><line-chart :lineChartData="item.value"></line-chart></li></ul></vue-seamless-scroll></div>
</template>
<script>
import LineChart from "./lineChart.vue";
export default {components: { LineChart },data() {return {tenList: [{title:"落实我省“”行动方案，研究制定细化举措",value: 20,},{title: "深化施",value: 30,},{title: "做好北式调整，确保平稳过渡",value: 10,},{title:"工程建设投运计划",value: 50,},{title:"联网试点示范建设",value: 80,},{title: "第二次落实省“碳达峰",value: 20,},{title: "深峰”特性研究，完善交直流混联控制措施",value: 30,},{title: "做好运行方式调整，确保平稳过渡",value: 10,},{title:"全年输工程建设投运计划",value: 50,},{title:"对接建设要求，积极参与全省互联网试点示范建设",value: 80,},],};},computed: {classOption() {return {step: 0.5, // 数值越大速度滚动越快// limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.lengthhoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 1000, // 单步运动停止的时间(默认值1000ms)};},},mounted() {},methods: {},
};
</script>
<style lang="scss">
.seamless-warp {height: 264px;overflow: hidden;
}
.tenCenter {padding: 10px 25px;list-style: disc;
}
</style>

配置项

step   数值越大速度滚动越快   1   Number
limitMoveNum   开启无缝滚动的数据量   5   Number
hoverStop   是否启用鼠标hover控制   true   Boolean
direction   方向 0 往下 1 往上 2向左 3向右   1   Number
openTouch   移动端开启touch滑动   true   Boolean
singleHeight   单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1   0   Number
singleWidth   单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3   0   Number
waitTime   单步停止等待时间(默认值1000ms)   1000   Number
switchOffset   左右切换按钮距离左右边界的边距(px)   30   Number
autoPlay   是否自动播放使用switch切换时候需要置为false   true   Boolean
switchSingleStep   手动单步切换step值(px)   134   Number
switchDelay   单步切换的动画时间(ms)   400   Number
switchDisabledClass   不可以点击状态的switch按钮父元素的类名   disabled   String
isSingleRemUnit   singleHeight and singleWidth是否开启rem度量   false   Boolean

vue-seamless-scroll 列表自动滚动相关推荐

帆软列表自动滚动脚本
帆软列表自动滚动脚本使用该脚本时,需将 'REPORT0' 替换为自己报表块的名字展示效果如下图: setTimeout(function() {//隐藏报表块report0的滚动条(此报表块名 ...
Android recyclerview item获焦时更新UI导致列表自动滚动到获焦处
问题场景描述:scrollview嵌套rv,rv item里有edittext,当edittext处于获焦状态时,item中有数据改变导致更新UI时,此时列表会自动滚动到获焦处. 分析原因:更新UI时 ...
vue手写列表竖向滚动
看看效果图最近由于项目需求,需要做一个列表的无线循环滚动,由于我们项目没有用UI库,所以手写了一个列表滚动,不过虽然网上很多,但还是想记录下来,话不多说了,上代码! 样式层 <template ...
vue中实现列表无缝滚动
1.安装 npm install vue-seamless-scroll --save 2.在需要使用的组件中引入进行配置 import vueSeamlessScroll from "vu ...
vue列表，table表格自动滚动效果
vue列表,表格自动滚动安装依赖 npm install vue-seamless-scroll --save main.js文件里面引入使用 import scroll from 'vue-sea ...
vue 列表内容自动向上滚动_【功能记录】Vue列表向上滚动无缝连接
最近给朋友帮忙的时候遇到一个列表向上滚动无缝连接功能的需求,整理了下思路,把这个功能草草的做出来了,尚未做优化完善,先记录一下吧~ Html代码 {{item.accountName}} {{item ...
vue自动滚动组件可以支持鼠标滚轮操作
vue自动滚动组件可以支持鼠标滚轮操作  <templat ...
【独立版】智慧城市同城V4_2.1.1全开源全插件+VUE前端，修复平台装修公告组件风格二和风格三无法自动滚动的问题
源码介绍 [独立版]智慧城市同城V4_2.1.1全开源全插件+VUE前端,修复平台装修公告组件风格二和风格三无法自动滚动的问题! 智慧城市同城是一套专注于多城市生活服务同城技术解决方案,全面覆盖同堿信 ...
vue 实现数据滚动显示_vue实现动态添加数据滚动条自动滚动到底部的示例代码...
在使用vue实现聊天页面的时候,聊天数据动态加到页面中,需要实现滚动条也自动滚动到底部.这时我找到网上有个插件 vue-chat-scroll 但是安装后发现是用不了的,报错信息如下: VM14383 ...

vue-seamless-scroll 列表自动滚动

1.下载

vue-seamless-scroll 列表自动滚动相关推荐

最新文章

热门文章