vue-list-auto-scroll-tsc v1.0.2

npm install vue-list-auto-scroll-tsc

引入后注册为组件即可使用

属性

step:

类型: String, Number

默认：1

说明：每次滚动的距离

1. 如果是数字，表示像数值
2. row：每次滚动一行
3. page：每次滚动一页

注意：如为数字，须大于1个像素

period:

类型: Number

默认: 20

说明：滚动触发的周期（ms），即多久滚动一次。将周期设置小一些，step设置小一些，可以实现在一秒内多次滚动，达到线性匀速滚动的效果

userCtrl:

type: Boolean

默认: true

说明：是否允许用户操作，为false时，会隐藏滚动条，鼠标滑轮失效

cycle:

类型: Boolean

默认: true

说明：是否循环滚动，若为true，滚动完毕后将滚动到顶部重新开始滚动；若为false，滚动到最低部将停止滚动

smooth:

类型: Boolean

默认: true

说明：每次滚动时是否为平滑滚动，平滑滚动有动画效果

resumeSmooth:

类型: Boolean

默认: false

说明：滚回顶部时是否为平滑滚动

loading:

类型: Boolean

默认: false

说明：是否正在加载，如果为true，滚动将暂停，直至加载完成，用于滚动加载更多的情形

事件

scrollEnd

说明：滚动到最底部会触发scrollEnd事件，父组件可以在此事件中处理加载更多的操作。

其它注意事项

1. 列表每一行的高度必须一致，因为组件内计算row的高度为平均高度
2. 使用时需要在列表每一行的标签上添加"auto-scroll-row"类名，只有添加了class="auto-scroll-row"，组件才认为这是一个行元素
3. 组件默认会占满父容器的宽高，所以需要给父容器指定一个尺寸

示例

###普通列表

<auto-scroll
  :step="1"
  :period="50"
  :user-ctrl="true"
  :resume-smooth="true"
>
 <div
    v-for="item in 50"
    :key="item"
    class="list auto-scroll-row"
    >{{ item * 2 }}
  </div>
</auto-scroll>

###加载更多

<template>
  <div class="container">
    <div class="list-box">
      <auto-scroll
        :step="1"
        :period="50"
        :user-ctrl="true"
        :resume-smooth="true"
        :loading="loading"
        @scrollEnd="loadingMore"
      >
        <div
          v-for="item in length"
          :key="item"
          class="list auto-scroll-row"
        >{{ item * 2 }}</div>
      </auto-scroll>
    </div>
  </div>
</template>

<script>
import autoScroll from 'vue-list-auto-scroll-tsc'
export default {
  name: 'Demo',
  components: {
    autoScroll
  },
  data() {
    return {
      length: 20,
      loading: false
    }
  },
  methods: {
    loadingMore() {
      this.loading = true
      setTimeout(() => {
        this.length += 20
        this.loading = false
      }, 2000)
    }
  }
}
</script>

<style scoped>
.list-box{
  background-color: #fff;
  width: 400px;
  height: 300px;
  margin: 20px;
}
.list{
  padding: 6px 3px;
  border-bottom: 1px solid #333;
  margin: 0;
  color: #333;
  /*height: 30px;*/
  display: flex;
  align-items: center;
}
</style>