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

This article describes how to load and refresh the list in a applet. It has good reference value. Next, let's take a look at the small Editor. This article mainly introduces how to pull and refresh the list in the applet. It has good reference value. Let's take a look at it with the small editor.

A applet is the most popular term after September 21. once it appeared, it really bombed the entire developer. of course, many App developers have a worry, will the arrival of mini programs bring about App disruption on the mobile end, and the loss of mobile programmers? as an Android developer, I don't believe it, even if there are, it also takes a year or two to achieve this through excessive polishing.

Whether or not small programs can subvert today's mobile development landscape, we must actively accept and learn from each other. The new technology is not excluded, so it is not as exciting as action. we need to build a small program development tool first. Next, let's start learning the implementation of pull-up loading and pull-down refresh of the list (obtain news through the aggregation data platform ).

1. introduce several components

1.1 scroll-view component

iconType: [ ‘success', ‘info', ‘warn', ‘waiting', ‘safe_success', ‘safe_warn', ‘success_circle', ‘success_no_circle', ‘waiting_circle', ‘circle', ‘download', ‘info_circle', ‘cancel', ‘search', ‘clear' ]

2. implementation of the pull-up loading and pull-down refreshing of the list

2.1 First

 
  
Loading...
   
  
   
   
   
    
Refreshing...
   
   
  
   
   
   
    
     
    
     
Title: {item. title }}
     
    
     
Source: {item. source }}
     
   
  
   
    
    
    
     
Loading the game...
    
    
   
    
     
No more content
    
    
   
 

2.2.1 detail. js logic code file

Var network_util = require ('.. /.. /utils/network_util.js '); var json_util = require ('.. /.. /utils/json_util.js '); Page ({data: {// text: "This is a page" list: [], dd: '', hidden: false, Page: 1, size: 20, hasMore: true, hasRefesh: false}, onLoad: function (options) {var that = this; var url =' http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno= 1 & ps = 10'; network_util. _ get (url, function (res) {that. setData ({list: res. data. result. list, hidden: true,}) ;}, function (res) {console. log (res) ;}) ;}, onReady: function () {// page rendering completed}, onShow: function () {// page display}, onHide: function () {// page hiding}, onUnload: function () {// page closing}, // Click event processing bindViewTap: function (e) {console. log (e. currentTarget. dataset. title) ;}, // load more loadMore: function (e) {var that = t His; that. setData ({hasRefesh: true,}); if (! This. data. hasMore) return var url =' http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno= '+ (++ That. data. page) + '& ps = 10'; network_util. _ get (url, function (res) {that. setData ({list: that. data. list. concat (res. data. result. list), hidden: true, hasRefesh: false,}) ;}, function (res) {console. log (res) ;}}, // refresh refesh: function (e) {var that = this; that. setData ({hasRefesh: true,}); var url =' http://v.juhe.cn/weixin/query?key=f16af393a63364b729fd81ed9fdd4b7d&pno= 1 & ps = 10'; network_util. _ get (url, function (res) {that. setData ({list: res. data. result. list, hidden: true, page: 1, hasRefesh: false,}) ;}, function (res) {console. log (res );})},})

Final effect:

Details about the implementation of news will be implemented later

Address: http://xiazai.jb51.net/201703/yuanma/WeiXinProject-master_jb51.rar

The above is the detailed implementation of the pull-up loading and pull-down refresh of the applet list. For more information, see other related articles in the first PHP community!