更新记录

1.0.2（2023-07-03） 下载此版本

补充区域滚动说明，页面滚动建议使用页面列表+原生下拉刷新 增加属性：是否刷新时候返回顶部

1.0.1（2023-06-27） 下载此版本

刷新背景颜色改为透明色

1.0.0（2023-06-26） 下载此版本

第一次发布

平台兼容性

uni-app

注意事项

区域滚动组件，支持上拉加载和下拉刷新。支持上拉加载和下拉刷新。滚动区域高于页面会导致滚动异常，优先级高于页面滚动，不建议用于页面滚动。

属性

事件

示例

<script>
import DragableList from "@/components/dragable-list/dragable-list.vue";

export default {
  name: "example",
  components: {DragableList},
  data() {
    return {
      list: [],
      isRefreshing: false,
      loadMoreStatus: 'loading', // loading | more | noMore
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList(isReload = false) {
      console.log('getList');
      this.loadMoreStatus = 'loading'

      if (isReload) {
        // this.params.pageNo = 1
        this.isRefreshing = true
        this.list = []
      }

      const list = []
      const baseLen = this.list.length
      for (let i = 0; i < 10; i++) {
        const item = {
          name: '列表项目 ' + (baseLen + i + 1),
          id: Math.random(),
        }
        list.push(item)
      }
      const total = 100

      console.log('list', list)

      // 加载更多
      this.list.push(...list)
      this.total = total
      if (this.list.length >= this.total) {
        this.loadMoreStatus = 'noMore'
      } else {
        this.loadMoreStatus = 'more'
      }
      this.isRefreshing = false
    },
    refreshList() {
      this.getList(true)
    },
    loadMore() {
      console.log('list loadMore');
      if (this.list.length >= this.total) return
      // this.params.pageNo++
      this.getList()
    },
  }
}
</script>

<template>
  <view style="width: 500px;height: 500px;background-color: #fff;margin: 0 auto">
    <dragable-list
        :is-refreshing="isRefreshing"
        :load-more-status="loadMoreStatus"
        @loadMore="loadMore"
        @refresh="refreshList"
    >
      <view v-for="item in list" :key="item.id" style="height: 100px;border-bottom: 1px solid #000">
        {{item.name}}
      </view>
    </dragable-list>
  </view>
</template>