w-scroll v0.0.4

无限滚动组件

介绍

基于vue3+Typescript封装的无限滚动组件，支持垂直（上下）和水平滚动（左右） 本组件是基于vue3和TS进行开发，暂不支持vue2

vue

开始使用

安装

npm install w-scroll -S

引入

在main.ts中引入

import { createApp } from 'vue'
import App from './App.vue'
import WScroll from 'w-scroll'

const app = createApp(App)
app.use(WScroll)
app.mount('#app')

使用

<script setup lang="ts">

</script>
<template>
  <div style="width: 500px; border: 1px solid #000;">
    <w-scroll>
      <template #content>
        <ul>
          <li>Lorem ipsum dolor sit amet consectetur.</li>
          <li>Saepe obcaecati ab excepturi qui voluptate.</li>
          <li>Optio dicta consequatur vero vel quis.</li>
          <li>Tenetur eum labore libero excepturi ab.</li>
          <li>Totam ea quaerat id consequatur animi!</li>
          <li>Esse praesentium fuga officiis vero iste.</li>
          <li>Necessitatibus quia quidem itaque commodi consectetur?</li>
          <li>A dicta odit cumque saepe aliquid.</li>
          <li>Ad, aspernatur quod! Reprehenderit, corporis labore!</li>
          <li>Commodi voluptatum reprehenderit ipsa eligendi! Aspernatur.</li>
          <li>Iure tenetur sapiente labore esse distinctio.</li>
          <li>Illo ducimus error explicabo quibusdam ratione?</li>
          <li>Lorem ipsum dolor sit amet consectetur adipisicing.</li>
          <li>Ab beatae tenetur autem? Aspernatur, dolorem natus?</li>
          <li>Sapiente repellendus quisquam nostrum architecto aliquam velit.</li>
          <li>Eveniet possimus quas molestias velit culpa dolorem!</li>
          <li>Eligendi quidem, expedita ea debitis rem libero.</li>
          <li>Provident, sunt. Dolores eum amet voluptatibus consequuntur!</li>
          <li>Vel enim odit magnam consectetur voluptas ratione.</li>
          <li>Error, excepturi iste illo eligendi quae possimus?</li>
          <li>Aperiam dolore labore voluptatibus, a fugiat cupiditate!</li>
          <li>
            Repellendus autem, veritatis exercitationem accusantium doloribus
            tempore!
          </li>
          <li>
            Exercitationem, ullam voluptatem recusandae asperiores perspiciatis
            aliquam.
          </li>
          <li>Error delectus voluptatum aut eligendi explicabo repudiandae?</li>
        </ul>
      </template>
    </w-scroll>
  </div>
</template>

属性

方法

插槽

备

滚动区域的样式，完全由父元素觉得，滚动组件的宽高继承自父元素没有复杂的样式配置，如果是垂直滚动一定要设置父元素高度，否则不生效，如果是水平滚动一定要设置父元素的宽度，否则不生效。