How to refresh the list by using WeChat applets

This article mainly introduces detailed information about instances for updating the list of applets. the code and implementation are provided here. if you need to refresh the list of applets, refer to below:

I recently learned about small programs and want to implement the list refresh, pull-down refresh, pull-up and load functions of the current APP.

First, let's take a look at the interface.

1. wx. request (get the data of the remote server, which can be understood as $. ajax)

2. two scroll-view events

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

2.2 bindscroll (when the page slides)

2.3 bindscrolltoupper)

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; // method for getting data. how to obtain the list data? you can use 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 (th At. 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 () {// note that the scroll-view must be set to a height to listen for rolling events. therefore, you need to assign var that = this; wx to the height of scroll-view in the onLoad event of the page. getSystemInfo ({succ Ess: function (res) {console.info (res. windowHeight); that. setData ({scrollHeight: res. windowHeight}) ;}}) ;}, onShow: function () {// obtain the data var that = this; GetList (that) ;}, bindDownLoad: function () {// this method is bound to the event var that slides to the bottom of the page; GetList (that) ;}, scroll: function (event) {// This method is bound to the event during page scrolling. I have recorded the current position here. y value. in order to request data, locate the page here. This. setData ({scrollTop: event. detail. scrollTop}) ;}, refresh: function (event) {// this method is bound to the event that slides the page to the top, and then refresh the page by pulling it up. = 0; this. setData ({list: [], scrollTop: 0}); GetList (this )}})

Index. wxml

   
      
         
          
            
     
      
{Item. name }}
             
     
      
{Item. short_description }}
           
        
     
    
      
   
    
Loading...
     
  
 

Thank you for reading this article. I hope it will help you. thank you for your support for this site!

For more details about small program instances that implement list refresh, please pay attention to PHP!