Analysis on the implementation method of pull-down refresh and pull-up loading of WeChat applet list

The example of this article describes the implementation method of list pull-down refresh and pull-up loading of WeChat applet list rendering function. Share it with everyone for your reference, the details are as follows:

The WeChat applet has a special label for January 9, 2017, which quickly became popular on the Internet and in the circle of friends. Recently, I also wrote a demo program Experience it. WeChat applet is somewhat similar to vuejs, both are data-driven views & one-way data binding, and its experience is much better than H5 page. This is due to the support of WeChat environment and the processing of loading all pages at the same time when running for the first time. This article will share the practice of pulling down to refresh and swiping up to load WeChat mini program lists.

Renderings

First let’s take a look at the program renderings. The following four pictures are from left to right: Come down and refresh Animations, pull-down refresh results, upswipe loading animations, and upswipe loading results. The data in the program are all simulated data and do not include network requests, so they can be run directly.

Method 1: Use the scroll-view component to implement

Because this implementation method was not chosen in the end (Pull-down refresh has bugs), so I will only give a brief introduction. Of course, if there is no need for pull-down refresh, the scroll-view component is very convenient for rendering the list. As can be seen from the official documentation, the scroll-view component integrates the following methods to provide programming Very convenient.

scroll-into-view String The value should be the id of a certain child element, then scroll to the element, and the top of the element will be aligned with the top of the scroll area
bindscrolltoupper EventHandle Scroll To the top/left, the scrolltoupper event
bindscrolltolower EventHandle will be triggered. When scrolling to the bottom/right, the scrolltolower event
bindscroll EventHandle will be triggered. Triggered when scrolling event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

Method 2: Use the page that comes with it Function

Page() function is used to register a page. Accepts an object parameter, which specifies the page's initial data, life cycle functions, event handling functions, etc.

1. Set the window foreground color to dark on the app.json page & allow drop-down

"window":{
  "backgroundTextStyle":"dark",
  "navigationBarBackgroundColor": "#000",
  "navigationBarTitleText": "wechat",
  "navigationBarTextStyle":"white",
  "enablePullDownRefresh": true
}

2. Set to allow drop-down on the list.json page

{
  "enablePullDownRefresh": true
}

3. Use onPullDownRefresh monitors the user's pull-down action

Note: The page will be prevented from rebounding when scrolling the scroll-view, so scrolling in the scroll-view cannot trigger onPullDownRefresh, so the page cannot be used when using the scroll-view component. of this feature.

onPullDownRefresh: function() {
 wx.showNavigationBarLoading() //在标题栏中显示加载
 let newwords = [{message: '从天而降',viewid:'-1',time:util.formatTime(new Date),greeting:'hello'}].concat(this.data.words);
 setTimeout( ()=> {
   this.setData({
     words: newwords
   })
   wx.hideNavigationBarLoading() //完成停止加载
   wx.stopPullDownRefresh() //停止下拉刷新
  }, 2000)
}

4. Use the onReachBottom page to pull up the bottom event

Note:, When entering the page for the first time, if the page is not full of one screen, onReachBottom will be triggered. It should be triggered only when the user actively pulls up. If the finger is pulled up, onReachBottom will be triggered multiple times. It should be pulled up once and only triggered once. Therefore, when programming, you need to These two points are taken into account.

onReachBottom:function(){
  console.log('hi')
  if (this.data.loading) return;
  this.setData({ loading: true });
  updateRefreshIcon.call(this);
  var words = this.data.words.concat([{message: '土生土长',viewid:'0',time:util.formatTime(new Date),greeting:'hello'}]);
  setTimeout( () =>{
    this.setData({
     loading: false,
     words: words
    })
  }, 2000)
 }
})

5. Upswipe to load icon animation

/**
 * 旋转刷新图标
 */
function updateRefreshIcon() {
 var deg = 0;
 console.log('旋转开始了.....')
 var animation = wx.createAnimation({
  duration: 1000
 });
 var timer = setInterval( ()=> {
  if (!this.data.loading)
   clearInterval(timer);
  animation.rotateZ(deg).step();//在Z轴旋转一个deg角度
  deg += 360;
  this.setData({
   refreshAnimation: animation.export()
  })
 }, 2000);
}

Finally attach the layout code:

<view wx:for="{{words}}" class="item-container">
  <view class="items">
    <view class="left">
       <view class="msg">{{item.message}}</view>
       <view class="time">{{item.time}}</view>
    </view>
    <view class="right">{{item.greeting}}</view>
  </view>
</view>
<view class="refresh-block" wx:if="{{loading}}">
 <image animation="{{refreshAnimation}}" src="../../resources/refresh.png"></image>
</view>

Related recommendations:

Summary of JS page refresh method

About the problem of automatically refreshing the page after clicking the button

Detailed example of refreshing the page in Javascript

The above is the detailed content of Analysis on the implementation method of pull-down refresh and pull-up loading of WeChat applet list. For more information, please follow other related articles on the PHP Chinese website!