内行人都知道的Uniapp下拉刷新上拉加载两种方法，选哪个？

Uniapp 下拉刷新和上拉加载的最佳实践

在开发 Uniapp 应用程序时，刷新数据是常见需求。Uniapp 提供了两种主要方法来实现下拉刷新和上拉加载：

一、Uniapp 自带刷新方法

这是 Uniapp 提供的简单易用的方法。只需在页面中添加以下代码：

<template>
  <view class="container">
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
    <button @click="refresh">刷新</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3]
    }
  },
  methods: {
    refresh() {
      this.list = [4, 5, 6]
    }
  }
}
</script>

这种方法的优点是简单高效。缺点是只能在页面初始化时触发刷新，需要手动调用 refresh() 方法。

二、Uniapp scroll-view 组件

Uniapp 的 scroll-view 组件提供了更灵活的下拉刷新和上拉加载功能。

<template>
  <view class="container">
    <scroll-view :scroll-y="true" @scrolltoupper="onScrollToUpper" @scrolltolower="onScrollToLower">
      <ul>
        <li v-for="(item, index) in list" :key="index">{{ item }}</li>
      </ul>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [1, 2, 3]
    }
  },
  methods: {
    onScrollToUpper() {
      console.log('下拉刷新')
    },
    onScrollToLower() {
      console.log('上拉加载')
    }
  }
}
</script>

这种方法的优点是灵活，可以实现更复杂的下拉刷新和上拉加载效果。缺点是实现难度更大，性能可能低于自带刷新方法。

哪种方法更优？

选择下拉刷新和上拉加载方法取决于具体需求：

• 如果需要简单易用的基本刷新，则自带刷新方法更合适。
• 如果需要更灵活的刷新效果，则 scroll-view 组件更合适。

常见问题解答

1. 如何在页面初始化时自动触发下拉刷新？

使用自带刷新方法时，可以通过 onLoad() 生命周期函数调用 refresh() 方法：

onLoad() {
  this.refresh()
}

使用 scroll-view 组件时，可以通过 mounted() 生命周期函数调用 triggerPullDownRefresh() 方法：

mounted() {
  this.$refs.scrollView.triggerPullDownRefresh()
}

2. 如何在数据更新后停止下拉刷新？

在数据更新后，调用 $refs.scrollView.stopPullDownRefresh() 方法：

updated() {
  this.$refs.scrollView.stopPullDownRefresh()
}

3. 如何在数据加载完毕后停止上拉加载？

在数据加载完毕后，调用 $refs.scrollView.stopPullUpRefresh() 方法：

updated() {
  this.$refs.scrollView.stopPullUpRefresh()
}

4. 如何加载更多数据？

在 onScrollToLower() 方法中，加载更多数据并更新列表：

onScrollToLower() {
  this.list = this.list.concat([7, 8, 9])
}

5. 如何自定义下拉刷新和上拉加载动画？

可以通过修改 scroll-view 组件的 refresh 属性和 loadmore 属性：

<scroll-view :scroll-y="true" refresh="my-refresh" loadmore="my-loadmore">

然后在样式表中定义自定义动画：

.my-refresh {
  animation: my-refresh-animation 1s;
}

.my-loadmore {
  animation: my-loadmore-animation 1s;
}