vue-seamless-scroll表格无缝滚动

一、安装
npm install vue-seamless-scroll --save

如下图


<template><div><div class="staDatas"><!-- 表头 --><ul class="head"><li class="room">发生时间</li><div class="man">任务描述</div><li class="spen">待处理环节</li><li class="supply">处理状态</li></ul><!-- 滚动部分 --><vue-seamless-scroll:data="dataList":class-option="optionSetting"class="seamless-warps"><ul class="item"><li v-for="(item, i) in dataList" :key="i" :class="{on:(i+1)%2==0,off:(i+1)%2!=0}"><span class="room" v-text="item.releaseTime"></span><span class="man" v-text="item.caseDesc"></span><span class="spen" v-text="item.waitingDealDesc"></span><!-- <span class="supply" v-text="item.status"></span> --><span class="supply" v-if="item.status == '0'">待签收</span><span class="supply" v-if="item.status == '1'">待处理</span><span class="supply" v-if="item.status == '2'">已下派</span><span class="supply" v-if="item.status == '3'">已反馈</span><span class="supply" v-if="item.status == '4'">已退回</span><span class="supply" v-if="item.status == '5'">已完结</span></li></ul></vue-seamless-scroll></div></div>
</template><script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {components: {vueSeamlessScroll},data() {return {dataList: [{caseDesc: "测试001",caseID: "16123451578",releaseTime: "2022-10-14 13:54",status: 1,waitingDealDesc: "zh"},{caseDesc: "登化00时，总氮监测值超标8.50倍，发生报警",caseID: "16653459579",releaseTime: "2022-10-12 09:54",status: 3,waitingDealDesc: "马桥子网格员"},{caseDesc: "测试",caseID: "16665464325",releaseTime: "2022-09-29 10:10",status: 0,waitingDealDesc: "zff"},{caseDesc: "测试用例",caseID: "166234234402",releaseTime: "2022-09-29 09:50",status: 5,waitingDealDesc: "liu"},{caseDesc: "ffff",caseID: "166234234663",releaseTime: "2022-09-27 20:10",status: 0,waitingDealDesc: "hhs"},{caseDesc:"福佳东 16时, 硫化氢 监测值 1.3416(ppm), 标准值0.21(ppm), 超标 6.39 倍, 发生报警",caseID: "1658423432041",releaseTime: "2022-07-20 17:15",status: 3,waitingDealDesc: "ddq"}],};},created() {// this.getDataList();},mounted() {},computed: {/* 列表滑动 */optionSetting() {return {step: 0.9, // 数值越大速度滚动越快limitMoveNum: this.dataList.length, // 开始无缝滚动的数据量 this.dataList.lengthhoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 100 // 单步运动停止的时间(默认值1000ms)};}},methods: {// getDataList() {//   //   let params = {//   //     // startTime: this.startTime,//   //     startTime: "2022-03-01",//   //     endTime: this.endTime,//   //   };//   comprehensivehttp.getTaskList().then(res => {//     if (res.result && res.result.length > 0) {//       this.dataList = res.result;//     }//   });// }}
};
</script>
<style lang="less" scoped>.staDatas {padding: 0.15rem 0.08rem 0.05rem;font-size: 0.12rem;display: flex;flex-direction: column;box-sizing: border-box;.head {display: flex;height: 52px;padding: 0 0.07rem;margin: 0;color: #79abef;line-height: 52px;li {list-style: none;}.supply {width: 10%;text-align: center;font-size: 20px;}.man {flex: 1;text-align: center;font-size: 20px;}.room {width: 25%;text-align: center;font-size: 20px;}.spen {width: 13%;text-align: center;font-size: 20px;}}.seamless-warps {overflow: hidden;height: 356px;margin-top: 10px;ul {padding-bottom: 0.05rem;li {list-style: none;height: 100px;// line-height: 100px;padding: 0 0.07rem;display: flex;align-items: center;.supply {width: 10%;text-align: center;font-size: 20px;}.man {width: 52%;text-align: center;font-size: 20px;word-break: normal;display: block;white-space: pre-wrap;overflow: hidden;}.room {display: inline-block;width: 25%;text-align: center;font-size: 20px;}.spen {display: inline-block;width: 13%;text-align: center;font-size: 20px;}}}}
}
.on {background: #041047;
}
.off {background: transparent;
}
</style>

vue-seamless-scroll表格无缝滚动相关推荐

vue实现列表的无缝滚动
前言: 在有无缝滚动的需求的时候我第一时间想的是轮播图,但是想弄一个列表那种的效果,轮播图就实现的就只能自己写个表头,这样用户体验不好,这里经过我自己使用,不管是兼容还是跨浏览器(版本较高)都是可以的 ...
react表格无缝滚动_js实现表格无缝滚动效果
table表格无缝向上滚动 height: 500px; overflow: hidden; position: relative; width: 1000px; margin: 100px auto ...
js实现表格无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
vue项目实现表格定时滚动
两种方法实现vue项目实现表格滚动 1.拖动元素实现 2. 改变数据实现 1.拖动元素实现原理:全部数据渲染出来,只展示规定的几条数据,配合css隐藏掉多余的部分,js通过定时器将需要拖动的元素向上 ...
html table表格无缝向上滚动效果,js实现表格无缝滚动效果
table表格无缝向上滚动 height: 500px; overflow: hidden; position: relative; width: 1000px; margin: 100px auto ...
vue中实现列表无缝滚动
1.安装 npm install vue-seamless-scroll --save 2.在需要使用的组件中引入进行配置 import vueSeamlessScroll from "vu ...
Vue封装公告信息无缝滚动展示
效果如图所示: 代码如下: <template><div class="container"><div id="box" ref= ...
react表格无缝滚动_table表格无缝向上滚动
Html Css Js 排名地市销售收入(万元) 同比(%) 环比(%) 销售计划(万元) 计划完成率(%) 排名地市销售收入(万元) 同比(%) 环比(%) 销售计划(万元) 计划完成率(% ...
vue列表，table表格自动滚动效果
vue列表,表格自动滚动安装依赖 npm install vue-seamless-scroll --save main.js文件里面引入使用 import scroll from 'vue-sea ...

vue-seamless-scroll表格无缝滚动

vue-seamless-scroll表格无缝滚动相关推荐

最新文章

热门文章