Vue3中列表滚动组件使用（vue3-seamless-scroll）尝咸淡

github官网

vue3-seamless-scroll

安装

npm install vue3-seamless-scroll --save

当前安装版本 “vue3-seamless-scroll”: “^3.0.2”,

多文件引入

  // **main.js**
  import { createApp } from 'vue';
  import App from './App.vue';
  import vue3SeamlessScroll from "vue3-seamless-scroll";
  const app = createApp(App);
  app.use(vue3SeamlessScroll);
  app.mount('#app');

单文件引用

<script setup name="Index" lang="ts">
	import { Vue3SeamlessScroll, VerticalScroll, HorizontalScroll } from 'vue3-seamless-scroll';
</script>

页面使用

 <div style="height: 33vh; overflow: hidden;">
	 <vertical-scroll v-if="companyList.length !== 0" :hover="true" :list="companyList">
	   <template v-slot="{ data }">
	     <div class="dis-c">
	       <div class="fs18 f-b bg-title" style="text-indent: 1rem">{{ data.nickName }}</div>
	       <div class="dis-r fs14 mt5" style="text-indent: 2rem">地址：{{ data.address }}</div>
	       <div class="dis-r fs14 mt5" style="text-indent: 2rem">电话：{{ data.phone }}</div>
	     </div>
	   </template>
	 </vertical-scroll>
</div>

这里的list结构大致这样

let companyList = ref([
{nickName:"单位1”,adress:"地址1",phone:"12312341234"},
{nickName:"单位2”,adress:"地址2",phone:"12312341235"}
]);

css部分文件

.dis-r {
  display: flex;
  flex-direction: row;
}

.dis-c {
  display: flex;
  flex-direction: column;
}

注意事项

1. vertical-scroll v-if=“companyList.length !== 0”
   这里需要加v-if 不然页面没反应，不要问为什么，我也不知道，反正加上就对了。
2. vertical-scroll 外围包裹组件需要加 overflow: hidden; 不然数据列表会飘向九天之外。

其他滚动插件 vue-loop-scroll

vue-loop-scroll

安装

# npm
npm i @joyday/vue-loop-scroll
# pnpm
pnpm i @joyday/vue-loop-scroll
# yarn
yarn add @joyday/vue-loop-scroll

自定义用法

<script setup lang="ts">
  import { ref } from "vue";
  import { LoopScroll } from "@joyday/vue-loop-scroll";

  const dataSource = ref([
    "1. scrolling scrolling scrolling",
    "2. scrolling scrolling scrolling",
    "3. scrolling scrolling scrolling",
    "4. scrolling scrolling scrolling",
  ]);
</script>

<template>
  <div class="box">
    <LoopScroll :dataSource>
      <template #default="{ item }">
        <span style="color: green">{{ item }}</span>
      </template>
    </LoopScroll>
  </div>
</template>

<style scoped>
  .box {
    height: 150px;
    border: 1px solid red;
    :deep(.scroll-loop-item) {
      border-bottom: 1px dashed #000;
      padding: 10px 4px;
    }
  }
</style>