Vue【vue-seamless-scroll】滚动组件及注意事项

一、运用场景：VUE开发的项目中需要表格滚动展示信息

二、组件：vue-seamless-scroll

三、使用：通过`ul`标签+`css`样式模拟表格，表头+表数据

安装

npm install vue-seamless-scroll --save

在main.js中引入

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

在.vue页面中使用

<div class="tableBox"><p class="tableHeader"><span>等级</span><span>名称</span></p><vue-seamless-scroll :data="warningData" :class-option="optionHover"><ul class="waringBox"><li v-for="item in warningData" :key="item.alarmId"><span>{{ item.alarmLevel }}</span><span :title="item.alarmName">{{ item.alarmName }}</span></li></ul></vue-seamless-scroll>
</div>

在实际运用中，一般会加上点击事件，会出现点击失效的问题。
那么，需要在上面的基础上，最外层加上点击事件，在span中绑定data数据。

<div class="tableBox" @click="goDetail($event)"><p class="tableHeader"><span>等级</span><span>名称</span></p><vue-seamless-scroll :data="warningData" :class-option="optionHover"><ul class="waringBox"><li v-for="item in warningData" :key="item.alarmId"><span>{{ item.alarmLevel }}</span><span :data-obj="JSON.stringify(item.alarmId)" :title="item.alarmName">{{ item.alarmName }}</span></li></ul></vue-seamless-scroll>
</div>

<script>
export default {name: "ScrollTable",data() {warningData: [{ alarmId: 1, alarmLevel: "紧急", alarmName: "告警一"},{ alarmId: 2, alarmLevel: "紧急", alarmName: "告警二"},{ alarmId: 3, alarmLevel: "一般", alarmName: "告警3"},{ alarmId: 4, alarmLevel: "严重", alarmName: "告警4"},{ alarmId: 5, alarmLevel: "提示", alarmName: "告警5"},{ alarmId: 6, alarmLevel: "其它", alarmName: "告警6"},{ alarmId: 7, alarmLevel: "提示", alarmName: "告警7"},{ alarmId: 8, alarmLevel: "其它", alarmName: "告警8"}]},computed: {// 表格滚动效果；optionHover() {return {step: 0.4, // 0.5 数值越大速度滚动越快limitMoveNum: 2, // 开始无缝滚动的数据量 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)};},},methods: {goDetail(e) {//打印出来的e.target就是点击的span元素//拿到span元素身上的自定义属性obj , obj本身是字符串, JSON.parse转成对象let alarmId = JSON.parse(e.target.dataset.obj);console.log(alarmId); // 打印 alarmId},}
}

<style lang="sass" scoped>
.tableBox{width: 200px;height: 300px;overflow: hidden;border-radius: 6px;border: 1px solid #e8e8e8;.tableHeader{position: relative;z-index: 10;display: flex;color: #333;margin: 0;padding: 6px;background: #e7e7e7;span{display: inline-block;text-align: center;}span:nth-child(1){width: 48px;}span:nth-child(2){flex: 1;}}ul.waringBox{margin-bottom: 0;li{display: flex;margin-bottom: 0;padding: 2px;border-top: 1px solid #e8e8e8;span{display: inline-block;text-align: center;}span:nth-child(1){width: 44px;}span:nth-child(2){flex: 1;cursor: pointer;white-space: nowrap; //强制文本在一行内输出overflow: hidden; //隐藏溢出部分text-overflow: ellipsis; //对溢出部分加上...}}}
}
</style>

Vue【vue-seamless-scroll】滚动组件及注意事项相关推荐

vue 自定义marquee无缝滚动组件
今天介绍一下,上下,左右无缝滚动的公告栏信息组件的开发. 首先上效果: 看起来有点卡顿,实际上还是挺顺畅的... 代码: 左右滚动的组件:marqueeX <template><di ...
vue 自定义marquee无缝滚动组件
首先上效果: 看起来有点卡顿,实际上还是挺顺畅的... 代码: 左右滚动的组件:marqueeX <template><div class="my-outbox" ...
php jsonp实例 mip无限滚动组件接口注意事项
在改造mip的过程中,很多同学遇到这样一个问题.mip无限滚动问题异步请求数据接口(仅支持 JSONP 请求) 异步请求接口需要规范 callback 为 'callback' 那么什么是JSONP ...
基于vue的无缝滚动组件
vue-seamless-scroll A simple, Seamless scrolling for Vue.js 在awesome上一直没有发现vue的无缝滚动组件,在工作之余写了个组件,分享出 ...
vue自动滚动组件可以支持鼠标滚轮操作
vue自动滚动组件可以支持鼠标滚轮操作  <templat ...
vue 文字上下循环滚动_基于 Vue 无缝滚动组件Vue-Seamless-Scroll
今天给小伙伴们推荐一款超棒的Vue无缝滚动组件VueSeamlessScroll. vue-seamless-scroll 基于 vue.js 构建的简单实用的无缝滚动组件.满足丰富的配置需求,支持上 ...
移动端cube界面设计html,滴滴开源基于 Vue.js 的移动端组件库 cube-ui
原标题:滴滴开源基于 Vue.js 的移动端组件库 cube-ui 开源最前线(ID:OpenSourceTop) 猿妹整编综合自:https://didi.github.io/cube-ui/ ...
【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）...
Vue 资源典藏,包括:UI组件开发框架服务端辅助工具应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
vue 实现 web端滚动刷新自定义指令
vue 实现 web端滚动刷新想实现web端的滚动刷新,我们需要判断滚动已经到达最低部,利用addEventListener监听滚动高度,触发相应的回调函数,激发加载更多数据,那么我们该怎样计算滚动 ...

Vue【vue-seamless-scroll】滚动组件及注意事项

一、运用场景：VUE开发的项目中需要表格滚动展示信息

二、组件：vue-seamless-scroll

三、使用：通过`ul`标签+`css`样式模拟表格，表头+表数据

Vue【vue-seamless-scroll】滚动组件及注意事项相关推荐

最新文章

热门文章

Vue【vue-seamless-scroll】滚动组件及注意事项

一、运用场景：VUE开发的项目中需要表格滚动展示信息

二、组件：vue-seamless-scroll

三、使用：通过ul标签+css样式模拟表格，表头+表数据

Vue【vue-seamless-scroll】滚动组件及注意事项相关推荐

最新文章

热门文章

三、使用：通过`ul`标签+`css`样式模拟表格，表头+表数据