【快应用】监听页面触顶及数据刷新案例

原创

华为开发者论坛 2022-11-11 15:39:09 博主文章分类：快应用 ©著作权

©著作权归作者所有：来自51CTO博客作者华为开发者论坛的原创作品，请联系作者获取转载授权，否则将追究法律责任

问题背景：

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

解决方法：

我们可以通过快应用提供的页面方法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>