@dimple-smile/uni-scroll

v2.0.18

Published

2 years ago

用于uniapp的滚动容器组件，封装常见业务场景，支持自定义配置。

Downloads

0High
0Medium
0Low

xiecp

uniapp 滚动列表组件下拉刷新到底自动加载

简介

使用 uniapp 框架开发需要自定义下拉刷新和自动加载？自带的 scrolltolower 事件有时候在意料之外触发？这个组件正在尝试高质量解决这些问题！该组件有以下特点：

使用 scroll-view 自定义下拉 + wxs 高性能操作 dom ，使用 IntersectionObserver 精准控制自动加载。
微信小程序、H5、APP体验基本一致。
除了 uniapp 运行时依赖，没有任何第三方依赖。
基于常用业务场景实现了一套开箱即用的规则，不喜欢的话支持自定义配置进行控制。

组件效果预览

你有两种种方式预览

使用浏览器访问该地址：https://dimple-uni-scroll.vercel.app 进行预览（pc端注意开启开发者模式调整到移动设备）。
这个项目本身就是一个 uniapp 项目，git clone该项目到本地后，可使用HBuiderX导入该项目进行预览。

安装

(Back to top)

// 在命令行里执行
$ npm i @dimple-smile/uni-scroll

// 在你的代码里写
import DimpleUniScroll from '@dimple-smile/uni-scroll'

使用说明

(Back to top)

下面是一个简单的使用例子

注意：如果使用父元素使用flex:1设置高度，需要添加overflow: auto属性，让flex:1的元素变成滚动容器

在src/pages/index/index.vue文件里能看到预览使用的栗子

<template>
  <view style="height: 400px">
    <d-scroll :total="total" :skip="skip" @fetch="fetch">
      <view v-for="(item, index) in list" :key="index">{{ index }}</view>
    </d-scroll>
  </view>
</template>

<script>
import DScroll from '@dimple-smile/uni-scroll'
export default {
  components: { DScroll },
  data() {
    return {
      list: [],
      total: -1, // 默认值不能设置为0，初始值为0时无法判断是 一开始就无数据 还是 请求之后为无数据，当然可以用noData和noMore自行控制
      skip: -1, // 默认值不能设置为0，理由同上，当然可以用noData和noMore自行控制
    }
  },
  methods: {
    async fetch(e) {
      const { stop } = e
      await this.getData(e)
      stop()
    },
    async getData(options = {}) {
      const { page = 1, skip = 0, limit = 20 } = options
      const { total, data } = await new Promise((res) => setTimeout(() => res({ total: 100, data: Array(limit).fill('') }), 2000))
      this.total = total
      if (page === 1) this.list = []
      this.list.push(...data)
      this.skip = this.list.length
    },
  },
  async mounted() {
    uni.showLoading({ title: '加载中' })
    await this.getData()
    uni.hideLoading()
  },
}
</script>

参数

注意：limit、skip、total三个参数配合可以得出，是否没有数据以及是否已经加载完数据。注意都要在请求之后再改变skip和total，默认值不要设置为0。当然可以用noData和noMore自行控制。

插槽

(Back to top)

| 参数名 | 意义 | 说明 | | - | - | - | | loadmorer | 自定义上拉加载 | 通过v-slot:loadmorer="{ threshold, loading}"获取自定义需要的数据。threshold：上拉拉触发事件的阈值；loading：是否处于加载状态。| | noData | 无数据时的内容 | 需要设置skip和total来配合判断。 | | noMore | 到底时的内容 | 需要设置skip和total来配合判断。 | | error | 错误状态的内容 | 如果设置了error状态，会覆盖默认slot | | 默认 | 用来放置内容 | 无

事件

(Back to top) | 参数名 | 意义 | 说明 | | - | - | - | | fetch | 下拉/上拉超过阈值之后触发的方法 | 使用者需要把更新列表的方法写在这个回调里，回调得到值是一个对象，对象里是一些可用参数。skip：见参数说明；limit：见参数说明；total：见参数说明；page：当前加载到的页码；loadmore：是否是上拉加载；stop：一个function，必须要手动调用stop()才会停止刷新/加载动作！所以要求对请求进行防呆处理，保证请求失败也会调用stop()。 | | scroll | scroll-view组件的滚动事件 | 按需使用。 |

注意：fetch是必须要handle的，handle后需要手动调用回调得到参数对象里的stop方法才能停止下拉/上拉动作。