使用插件vue-seamless-scroll 完成内容持续动态
1、安装插件
npm install vue-seamless-scroll --save2、项目中引入
//单独引入import vueSeamlessScroll from 'vue-seamless-scroll'export default {components: { vueSeamlessScroll},}//或者在main.js引入import scroll from 'vue-seamless-scroll'Vue.use(scroll)
3、页面使用
<vue-seamless-scroll :data="tableList" :speed="60" :class-option="Option" style="height: 100%;overflow: hidden;"><ul slot="default" class="scroll-list" v-for="(item, index) in tableList" :key="index" @click="handlePoliceClick(item)"><li><img src="../../../assets/dataIcon/list.png" alt=""><span style="margin-left:15px;">{{ item.pushTypeName }}</span></li><li><span>报警区域：</span><span>{{ item.monitorName }}</span></li><li><span>报警时间：</span><span>{{ item.pushTime }}</span></li><li><span>处理状态：</span><span>{{ item.status == 0 ? '未处理' : '已处理' }}</span></li></ul></vue-seamless-scroll> computed: {Option() {//vue-seamless-scroll参数配置return {step: 0.2, // 数值越大速度滚动越快limitMoveNum:4, // 开始无缝滚动的数据量hoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) waitTime: 1000 // 单步运动停止的时间(默认值1000ms)}},},
.table-list {height: calc(100% - 60px);margin-top: 10px;
}