HarmonyOS鸿蒙Next中【快应用】监听页面触顶及数据刷新案例

HarmonyOS鸿蒙Next中【快应用】监听页面触顶及数据刷新案例 问题背景：

快应用页面滑动时，滑动到页面某个地方时，想回到页面的最顶端去刷新页面数据，我们该如何实现？

解决方法：

我们可以通过快应用提供的页面方法this.$page.scrollTo去滑动到指定位置，只要指定方法中的top参数为0即可回到最顶端，至于如何监听页面触顶，快应用中又提供了onReachTop生命周期，我们可以调用该接口来监听，并在里面实现数据的刷新。

示例代码：

<template>
  <div class="container" onclick="click">
    <block for="{{listData}}">
      <text class="txt">{{ $item }}--{{ $idx }}</text>
    </block>
  </div>
</template>

<style>
  .container {
    flex: 1;
    flex-direction: column;
    align-items: center;
  }
  .txt {
    height: 150px;
    width: 85%;
    align-items: flex-start;
    margin-bottom: 15px;
    border-color: #9400D3;
    border-width: 5px;
  }
</style>

<script>
  import prompt from '@system.prompt'
  import router from '@system.router';
  export default {
    data: {
      listAdd: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
      listData: [],
    },
    onInit: function () {
      this.listData = [].concat(this.listAdd)
    },
    onReachTop: function () {
      prompt.showToast({
        message: "到顶部了"
      })
      // update page content
      var that = this
      for (let i = 0; i < this.listAdd.length; i++) {
        this.listData[i] = this.listAdd[this.listAdd.length - i - 1]
      }
      var renderData = [].concat(that.listData, that.listAdd)
      setTimeout(function () {
        that.listData = renderData
      }, 500)
    },
    click() {
      this.$page.scrollTo({ top: 0, behavior: "smooth" });
    },
    newclick() {
      router.push({
        uri: '/New',
        params: { body: " test send message", test: 'hello', newtest: 'newtest' }
      })
    }
  }
</script>

Tips: 示例中是在触顶时触发onReachTop周期后对数组进行了首尾对调来实现数据的刷新的效果，实际开发中开发者可以在该生命周期里面做一些内容更新的操作的。