WeChat applet list pull-up loading and pull-down refreshing implementation, Applet Loading

The implementation of the pull-up loading and pull-down refreshing of the applet list, and the loading of the Applet

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

Note: To use vertical scrolling, you must set a fixed height and WXSS to set the height.

1.2 image component

Note: There are 12 modes, 3 of which are scaling mode and 9 are cropping mode.

1.3 Icon Components

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

2.2 The logic is simple, and the code is directly written.

2.2.1 detail. wxml layout File

<Loading hidden = "{hidden}" bindchange = "loadingChange"> loading... </loading> <scroll-view scroll-y = "true" style = "height: 100%;" bindscrolltolower = "loadMore" bindscrolltoupper = "refesh"> <view wx: if = "{hasRefesh}" style = "display: flex; flex-direction: row; align-items: center; align-self: center; justify-content: center; "> <icon type =" waiting "size =" 45 "/> <text> refreshing... </text> </view> <view wx: else style = "display: none "> <text> </view> <view class =" lll "wx: for =" {list} "wx: for-item = "item" bindtap = "bindViewTap" data-title = "{item. title }}"> <image style = "width: 50px; height: 50px; margin: 20rpx;" src = "{item. firstImg }}"> </image> <view class = "eee"> <view style = "margin: 5px; font-size: 8px"> title: {item. title }}</view> <view style = "margin: 5px; color: red; font-size: 6px"> Source: {item. source }}</view> <view class = "tips1"> <view wx: if = "{hasMore}" style = "display: flex; flex-direction: row; align-items: center; align-self: center; justify-content: center; "> <icon type =" waiting "size =" 45 "/> <text> force loading... </text> </view> <view wx: else> <text> no more content </text> </view> </scroll-view>

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 = this; 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 all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!