MescrollUni 组件 - Uni-app 移动端滚动插件

MescrollUni 组件是一个基于 Mescroll.js 的 Uni-app 移动端滚动插件，支持下拉刷新和上拉加载更多功能。该组件提供了丰富的配置选项和回调函数，方便开发者定制各种功能和交互。

组件属性

| 属性 | 类型 | 说明 | 默认值 | |---|---|---|---| | down | Object | 下拉刷新配置 | {} | | up | Object | 上拉加载更多配置 | {} | | top | String, Number | 组件距离页面顶部的距离 | 0 | | bottom | String, Number | 组件距离页面底部的距离 | 0 | | fixed | Boolean | 是否固定定位 | true |

组件方法

| 方法 | 参数 | 说明 | |---|---|---| | scroll | Event | 滚动事件监听 | | | touchstartEvent | Event | 触摸开始事件监听 | | | touchmoveEvent | Event | 触摸移动事件监听 | | | touchendEvent | Event | 触摸结束事件监听 | | | emptyClick | | 空数据点击事件监听 | | | toTopClick | | 回到顶部点击事件监听 | | | setClientHeight | | 设置组件高度 | |

使用示例

<template>
  <view>
    <mescroll-uni
      :down='downOption'
      :up='upOption'
      @down='handleDown'
      @up='handleUp'
    >
      <view v-for='(item, index) in dataList' :key='index'>{{item.name}}</view>
    </mescroll-uni>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        downOption: {
          // 下拉刷新配置
        },
        upOption: {
          // 上拉加载更多配置
        },
        dataList: [],
      }
    },
    methods: {
      handleDown() {
        // 下拉刷新事件处理
      },
      handleUp() {
        // 上拉加载更多事件处理
      },
    }
  }
</script>

更多信息

请参考 Mescroll.js 的官方文档：https://mescroll.com/