Home >WeChat Applet >Mini Program Development >WeChat applet list pull-down refresh pull-up load example code

WeChat applet list pull-down refresh pull-up load example code

小云云
小云云Original
2018-02-03 09:02:213506browse

This article mainly shares the WeChat applet to implement pull-down refresh and pull-up loading of the list. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

DEMO download

Rendering

WeChat applet list pull-down refresh pull-up load example code

##Principle

Use the onPullDownRefresh function (pull-down refresh listening function) and onReachBottom function (pull-up loading listening function) of the WeChat applet to monitor the pull-down and pull-up dynamics of the page, thereby modifying the page data!


Page configuration JSON

    ##enablePullDownRefresh: Enable pull-down refresh;
  • onReachBottomDistance: The distance from the bottom of the page when the page pull-down event is triggered, in px.

{
 "enablePullDownRefresh": true,
 "onReachBottomDistance": 50
}

WXML

<view class="tui-content">
 <view class="tui-menu-list" wx:for="{{dataList}}">Item -- {{item}}</view>
</view>

JS

This Use setTimeout to simulate requesting data;

Loading data is limited to three times, and calling wx.showToast shows that there is no more data.



Page({
 data: {
 dataList: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
 count : 0
 },
 onPullDownRefresh(){
 var self = this;
 setTimeout(() => {
  // 模拟请求数据,并渲染
  var arr = self.data.dataList, max = Math.max(...arr);
  for (var i = max + 1; i <= max + 3; ++i) {
  arr.unshift(i);
  }
  self.setData({ dataList: arr });
  // 数据成功后,停止下拉刷新
  wx.stopPullDownRefresh();
 }, 1000);
 },
 onReachBottom(){
 var arr = this.data.dataList, max = Math.max(...arr);
 if (this.data.count < 3) {
  for (var i = max + 1; i <= max + 5; ++i) {
  arr.push(i);
  }
  this.setData({
  dataList: arr,
  count: ++this.data.count
  });
 } else {
  wx.showToast({
  title: &#39;没有更多数据了!&#39;,
  image: &#39;../../src/images/noData.png&#39;,
  })
 }
 }
})

Summary

Must use wx.stopPullDownRefresh() to stop pull-down refresh after each data request is completed .

Related recommendations:


Implementation of pull-up loading and pull-down refresh of WeChat applet list

The above is the detailed content of WeChat applet list pull-down refresh pull-up load example code. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn