vue3-seamless-scroll用法及注意事项

1. 下载插件

npm install vue3-scroll-seamless@2.0.1 --save

2. 组件中使用

<template>
  <div class="event-gps-list" v-if="eventGPSListData.length > 0">
      <vue3-seamless-scroll class="seamless-warp3" 
          :key="scrollKey"
          :limitScrollNum="10"
          :isWatch="true"
          :step="0.08"
          :list="eventGPSListData"
      > 
          	<!-- 滚动的内容 -->
             <div class="scroll-box" v-for="{ data, index }" :key="index">
                 <p>
                     <span>{{ data ? data.type : ''}}</span>
                     <span>{{ data ? data.createTime : '' }}</span>
                 </p>
             </div> 
     </vue3-seamless-scroll>
  </div>
</template>
<script lang="ts" setup>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

const eventGPSListData = ref([] as any) // 事件类型列表数据

// 获取事件类型列表数据
const getEventList = ()=>{
    baseService.get('/sys/api/thirdpositiongps/getListAll',{
        page: 1,
        limit: 1000,
        type: selectedEventList.value? selectedEventList.value.join(','): '',
        ...param
    }).then(res=>{
        if(res.code == 0){
            let data = res.data ? res.data.list: []
            eventGPSListData.value = [...data]
            emit('filterGPS', data)
            scrollKey.value += 1 // 强制刷新组件
        }
    })
}
</script>
<style lang="scss" scoped>
	.event-gps-list{
        height: calc(40vh);
        overflow: hidden !important; /* 避免被覆盖 */
        background-image: url("@/assets/static/largeScreen/left_bg5.png");
        background-position: center bottom;
        background-size: 100% 100%;
        padding: 10px 0;
    }
    .seamless-warp3{
      height: 100%;
      box-sizing: border-box;
      
    }
   
    .scroll-box{
        p{
            display: flex;
            justify-content: space-between;
            padding: 5px 10px;
            margin: 2px 5px;
            font-size: 13px;
            color: $textColor;
            cursor: pointer;
            &:hover{
                background-color: rgba(58, 133, 158, 0.7);
            }
        }
    }
</style>

3. 注意事项

滚动盒子样式要设置height,overflow