- 推荐使用vue插件:vue-seamless-scroll
- 个人使用的感受就是,棒极了!
- 简单、方便、银杏
- 看一下效果图:
使用起来肥肠滴方便,设计非常银杏,下面我给老铁演示一下
第一步:安装
cnpm install vue-seamless-scroll --save
第二步:在main.js中引入
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
第三步:使用
<template>
<div class="home_bottom_big">
<el-tabs v-loading="loadingAdd">
<el-tab-pane label="实时事件">
<ul class="item">
<li class="li_title">
<span class="li_sjmc">事件标题</span
><span class="li_fssjStr">发生时间</span
><span class="li_zrdwname">责任单位</span
><span class="li_caseStateStr">处置情况</span
><span class="li_sjLevelStr">事件等级</span>
</li>
<vue-seamless-scroll
:data="tableData"
class="seamless-warp"
:class-option="optionSetting"
>
<li
class="li_item"
v-for="item in tableData"
:key="item.sjbh"
@click="tabs(item)"
>
<span class="li_sjmc" v-text="item.sjmc"></span
><span class="li_fssjStr" v-text="item.fssjStr"></span>
<span class="li_zrdwname" v-text="item.zrdwname"></span
><span
class="li_caseStateStr"
v-text="item.caseStateStr"
></span>
<span class="li_sjLevelStr" v-text="item.sjLevelStr"></span>
</li>
</vue-seamless-scroll>
</ul>
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import { queryCase } from "@/api/home";
export default {
data() {
return {
tableData: [],
loadingAdd :false
};
},
methods: {
//获取实时事件数据
gettableData() {
this.loadingAdd = true;
queryCase().then((res) => {
this.tableData = res.data;
this.loadingAdd = false;
});
},
},
computed: {
optionSetting() {
return {
step: 0.15, // 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量 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)
};
},
},
mounted() {
this.gettableData();
},
};
</script>
如果不太明白的话可以在【在线演示文档】进行深入学习