使用插件vue-seamless-scroll 完成内容持续动态

本文主要是介绍使用插件vue-seamless-scroll 完成内容持续动态，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 

1、安装插件

npm install vue-seamless-scroll --save

2、项目中引入

 //单独引入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;
}

这篇关于使用插件vue-seamless-scroll 完成内容持续动态的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---