微信小程序分页加载
1.app.json中:
"window": {
"enablePullDownRefresh": true //是否开启当前页面下拉刷新
}
2.wxml中:
<view class="common-list common-list-index">
<view class="item" wx:for="{{ list }}" wx:key="id" data-id="{{item.id}}" data-item="{{item}}" catchtap="toDetail">
<view class="title">客户:{{ item.customerNm }} <text class="fr">客户类型:{{ item.customerTypeName }}</text>
</view>
<view><text>客户编号:{{item.customerCd}}</text><text> 提报人:{{ item.createBy }}</text></view>
<view><text>客户联系人:{{ item.linkman||"" }}</text><text>联系电话:{{ item.tel||"" }}</text> </view>
<view> <text>公司地址:{{ item.companyAdd||"" }}</text></view>
<view class="clearfix">
<view class="btn-record btn-update fr" wx:if="{{!isSelect}}" data-id="{{item.id}}" catchtap="updateCustomer">修改
</view>
<view class="btn-del fr" wx:if="{{!isSelect}}" data-id="{{item.id}}" catchtap="delCustomer">删除</view>
</view>
</view>
</view>
3.js中:
// util里封装好了请求的方法,api是请求地址
var util = require('../../utils/util.js');
var api = require('../../config/api.js');
Page({
/**
* 页面的初始数据
*/
data: {
queryParams: {
customerNm: "",
customerType: "",
trade: '', // 行业
pageNum: 1,
pageSize: 5,
},
hasMoreData: true,
contentlistTem: [], // 滑动之前的数组
list: [], // 滑动累加之后的数组
},
getList(queryParams) {
var that = this;
// util里封装好了请求的方法,api是请求地址
util.requestGet(api.CustomerList, queryParams, 'GET').then(function (res) {
var contentlistTem = []
if (res.code == 200) {
if (that.data.queryParams.pageNum == 1) {
contentlistTem = []
} else {
contentlistTem = that.data.contentlistTem
}
var list = res.rows; // 服务器回包信息
if (list.length < that.data.queryParams.pageSize) {
that.setData({
list: contentlistTem.concat(list),
hasMoreData: false,
contentlistTem: (that.data.queryParams.pageNum == 1) ? list : contentlistTem.concat(list)
})
} else {
that.setData({
list: contentlistTem.concat(list),
hasMoreData: true,
['queryParams.pageNum']: that.data.queryParams.pageNum + 1,
contentlistTem: (that.data.queryParams.pageNum == 1) ? list : contentlistTem.concat(list)
})
}
} else {
wx.showToast({
title: '出现异常'
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
that.getList(this.data.queryParams);
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.data.queryParams.pageNum = 1
this.getList(this.data.queryParams);
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
if (this.data.hasMoreData) {
this.getList(this.data.queryParams);
} else {
wx.showToast({
title: '已经到底了...',
icon: 'none'
})
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})