Why does uniapp not refresh when pulling up to load more Alipay?

When using uniapp to develop the Alipay applet, you may encounter a problem: when pulling up to load more, the Alipay applet will not automatically refresh the page. This article explains how to resolve this issue.

1. Introducing the pageScrollTo method that comes with Alipay

When uniapp develops the Alipay applet, you can use the pageScrollTo method that comes with Alipay to scroll the page to the specified position. The specific usage is as follows:

// 在vue文件的methods中定义一个scrollToBottom方法
scrollToBottom() {
  // 获取页面滚动高度
  uni.pageScrollTo({
    scrollTop: 9999,
    duration: 0
  });
},
// 在template中引用
<template>
  <view>
    <!-- 省略其他代码 -->
    <view @scrolltolower="scrollToLower">上拉加载更多</view>
  </view>
</template>

2. Use a timer to delay execution

In the above code, we call the scrollToBottom method in the scrollToLower method to scroll the page. However, in the Alipay applet, it takes time to scroll the page, and we need to scroll the page to the bottom before performing more loading operations. Therefore, we need to use a timer in the scrollToLower method to delay loading more operations. The specific usage is as follows:

// 在vue文件的methods中定义一个timer变量
data() {
  return {
    timer: null
  }
},
// 在scrollToLower方法中使用定时器
scrollToLower() {
  if (this.timer) {
    clearTimeout(this.timer);
  }
  this.timer = setTimeout(() => {
    this.scrollToBottom();
    // TODO: 执行加载更多的操作
  }, 100);
}

In the above code, we define a timer variable to save the timer id. Every time the scrollToLower method is executed, the previous timer (if any) is cleared first, and then Then use the setTimeout method to delay the execution of scrollToBottom and load more operations.

The above is the method to solve the problem of pulling up and loading more pages without refreshing the page in the Alipay applet developed by uniapp. Hope it helps.

The above is the detailed content of Why does uniapp not refresh when pulling up to load more Alipay?. For more information, please follow other related articles on the PHP Chinese website!