(动态列表滚动)vue-seamless-scroll的使用 实现列表滚动

1. npm 下载依赖

?

1	npm install vue-seamless-scroll --save

2.在需要使用的页面引入

?

1 2 3 4

import vueSeamlessScroll from 'vue-seamless-scroll'  components: {     vueSeamlessScroll   },

3.完整代码

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

<template> <div> <vue-seamless-scroll      :data="dataArr.eventData"       class="seamless-warp"       :class-option="classOption"       @ScrollEnd="scrollEnd"       ref="seamlessScroll"     >         <!-- 需实现滚动代码      -->      </vue-seamless-scroll> </div> </template>   <script> import vueSeamlessScroll from "vue-seamless-scroll"; export default {   name: "RightModulesThree",   components: { vueSeamlessScroll },   data() {     return {};   },   computed: {     classOption() {       return {         step: 0.3, // 数值越大速度滚动越快         limitMoveNum:9, // 开始无缝滚动的数据量 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)       };     },   },   methods: {     setDian(i,e){       let data = e.target.dataset;       this.$emit("supervise-detail", data.name, data.type);       this.$refs.seamlessScroll.reset(); // 表示重置意思       let target = e.target;       if(target.tagName == "SPAN") {         console.log(i,'789456')         console.log(e,'1111')       }     },   }, }; </script>

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52

<style scoped lang="scss"> .box_right_3 {   flex: 1;   overflow: hidden;   background-size: 100% 100%;   font-family: Alibaba-PuHuiTi-R;   font-size: 14px;   color: #ade2ff;   letter-spacing: 0; } .seamless-warp {   width: 100%;   margin: 8px 0px;   color: white;   overflow: hidden;   .warp-item {     display: flex;     justify-content: space-between;     font-size: 14px;     color: #FFFFFF;     align-items: center;     height: 48px;     .item_con {       background-size: 100% 100%;       padding: 2px 0px;       color: #04d6de;     }   } } .warp-item-one{   display: flex;   justify-content: space-between;   font-size: 14px;   color: #FFFFFF;   align-items: center;   height: 48px; } .gd_title{   display: flex;   justify-content: space-between;   align-items: center;   color: #76CCF4 ;   font-size: 14px;   margin-top: 22px;   height: 36px;   background: linear-gradient(207deg, rgba(96,157,215,0.1) 0%, rgba(129,189,250,0.6) 100%); } .shenpi{   background-size: 100% 100%;   color:#FF5000  ; } </style>