uniapp二次开发uni-scroll-view下拉刷新和上拉加载更多的功能_uniapp scroll-view 下拉刷新

1、下拉刷新功能的实现

在pages目录下选择你需要添加下拉刷新功能的页面，打开该页面的vue文件。
2、在template中添加下拉刷新的结构，可以使用uni自带的下拉刷新组件uni-scroll-view，代码如下：

<template>
  <view>
    <uni-scroll-view class="refresh" :enable-back-to-top="true" @scrolltoupper="onRefresh">
      <view class="refresh__content">
        // 这里是页面的内容
      </view>
    </uni-scroll-view>
  </view>
</template>
1
2
3
4
5
6
7
8
9

3、在script中添加下拉刷新的逻辑代码，代码如下：

<script>
export default {
  data() {
    return {
      // 这里是页面的数据
    }
  },
  methods: {
    onRefresh() {
      // 这里是下拉刷新触发的逻辑代码
      // 在这里处理数据的刷新操作
      // 刷新完成后需要重置下拉刷新组件的状态
      // 例如：this.$refs.refreshRef.finishPullDown()
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这样，我们就完成了下拉刷新功能的实现。

4、上拉加载更多功能的实现

在页面的template中添加上拉加载更多的结构，可以使用uni自带的上拉加载组件uni-scroll-view，代码如下：

<template>
  <view>
    <uni-scroll-view class="list" :enable-back-to-top="true" @scrolltolower="onLoadMore">
      <view class="list__content">
        // 这里是列表的内容
      </view>
      <uni-loading v-if="loading" tip="加载中..."></uni-loading>
    </uni-scroll-view>
  </view>
</template>
1
2
3
4
5
6
7
8
9
10

5、在页面的script中添加上拉加载更多的逻辑代码，代码如下：

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    onLoadMore() {
      // 这里是上拉加载更多触发的逻辑代码
      // 在这里处理数据的加载操作
      // 加载完成后需要重置上拉加载组件的状态
      // 例如：this.$refs.listRef.finishPullUp()
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这样，我们就完成了上拉加载更多功能的实现。