Detailed explanation of examples of list refresh in WeChat applet

WeChat Mini Program List Refresh:

WeChat Mini Program, I recently learned the knowledge of WeChat Mini Program, and I want to realize the list refresh, pull-down refresh, pull-up loading and other functions of the current APP.

Let’s take a look at the interface first

##1.wx.request (obtaining data from the remote server, can be understood as $.ajax)

2. Two events of scroll-view

2.1 bindscrolltolower (when sliding to the bottom of the page)

2.2 bindscroll (when the page slides)

2.3 bindscrolltoupper (when sliding to the top of the page)

Then let’s look at the code and describe it in detail.

index.js

var url = "http://www.imooc.com/course/ajaxlist";
var page =0;
var page_size = 20;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;
 
 
// 获取数据的方法，具体怎么获取列表数据大家自行发挥
var GetList = function(that){
  that.setData({
    hidden:false
  });
  wx.request({
    url:url,
    data:{
      page : page,
      page_size : page_size,
      sort : sort,
      is_easy : is_easy,
      lange_id : lange_id,
      pos_id : pos_id,
      unlearn : unlearn
    },
    success:function(res){
      //console.info(that.data.list);
      var list = that.data.list;
      for(var i = 0; i < res.data.list.length; i++){
        list.push(res.data.list[i]);
      }
      that.setData({
        list : list
      });
      page ++;
      that.setData({
        hidden:true
      });
    }
  });
}
Page({
 data:{
  hidden:true,
  list:[],
  scrollTop : 0,
  scrollHeight:0
 },
 onLoad:function(){
  //  这里要非常注意，微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值
   var that = this;
   wx.getSystemInfo({
     success:function(res){
       console.info(res.windowHeight);
       that.setData({
         scrollHeight:res.windowHeight
       });
     }
   });
 },
 onShow:function(){
  //  在页面展示之后先获取一次数据
  var that = this;
  GetList(that);
 },
 bindDownLoad:function(){
  //  该方法绑定了页面滑动到底部的事件
   var that = this;
   GetList(that);
 },
 scroll:function(event){
  //  该方法绑定了页面滚动时的事件，我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。
   this.setData({
     scrollTop : event.detail.scrollTop
   });
 },
 refresh:function(event){
  //  该方法绑定了页面滑动到顶部的事件，然后做上拉刷新
   page = 0;
   this.setData({
     list : [],
     scrollTop : 0
   });
   GetList(this)
 }
})

index.wxml

<view class="container">
  <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;"
    class="list" bindscrolltolower="bindDownLoad" bindscroll="scroll" bindscrolltoupper="refresh">
    <view class="item" wx:for="{{list}}">
      <image class="img" src="{{item.pic_url}}"></image>
      <view class="text">
        <text class="title">{{item.name}}</text>
        <text class="description">{{item.short_description}}</text>
      </view>
    </view>
  </scroll-view>
  <view class="body-view">
    <loading hidden="{{hidden}}" bindchange="loadingChange">
      加载中...
    </loading>
  </view>
</view>

## Thanks for reading, I hope this helps everyone, and thank you for your support of this site!

For more WeChat applet implementation examples of list refresh, please pay attention to the PHP Chinese website for related articles!