Pull-up refresh and pull-up loading of WeChat applet list

##1.Introduce several components

###1.1 scroll-view component

Write picture description here

Note: When using vertical scrolling, you need to give a fixed height and set the height through WXSS. ###1.2 image component

Write picture description here

Note: mode has 12 modes, 3 of which are zoom modes and 9 are cropping modes. ###1.3 Icon component Write picture description here

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 pull-up loading and pull-down refresh of list

##2.1 Let’s take a rendering first and write the picture description here ##2.2 The logic is very simple, just upload the code ###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></text></view>
<view class="llll" 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>
</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>Deadly loading...</text></view>
<view wx:else><text>No more content</text></view>
</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 hidden
},
onUnload:function(){
// Page close
},
//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 processing
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);
})
},
})