1、首先在项目的app.json文件中注册一个demo页面
{
"pages": ["pages/demo/demo"]
...
}
2、直接上代码
(1) demo.wxml
<view class='order-lists'>
<view>
<view class="result-item" wx:for="{{requestOrderList}}" wx:key="unique" data-data="{{item}}">
<text class="title">{{item.name}}</text>
</view>
<view class="loading" hidden="{{!requestLoading}}">正在载入更多...</view>
<view class="loading complete" hidden="{{!requestLoadingComplete}}">已加载全部</view>
</view>
</view>
(2) demo.wxss 有写样式为了方便没有用，但不会影响效果
/* pages/demo/demo.wxss */
page {
display: flex;
flex-direction: column;
height: 100%;
}
/*滚动列表*/
.order-lists {
flex: auto;
position: relative;
border: 1px solid #000;
}
.order-lists scroll-view {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
.result-item {
position: relative;
display: flex;
flex-direction: column;
height: 300rpx;
align-items: center;
justify-content: center;
/* padding: 20rpx 0 20rpx 110rpx; */
overflow: hidden;
border-bottom: 2rpx solid #e5e5e5;
background-color: #fff;
}
.result-item .media {
position: absolute;
left: 16rpx;
top: 16rpx;
width: 80rpx;
height: 80rpx;
border-radius: 999rpx;
}
.result-item .title, .result-item .subtitle {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 36rpx;
}
.result-item .title {
margin-bottom: 4rpx;
color: #000;
}
.result-item .subtitle {
color: #808080;
font-size: 24rpx;
}
.result-item:first-child .subtitle text {
margin-right: 20rpx;
}
.result-item:not(:first-child) .subtitle text:not(:first-child):before {
content: '/';
margin: 0 8rpx;
}
.loading {
padding: 10rpx;
text-align: center;
}
.loading:before {
display: inline-block;
margin-right: 5rpx;
vertical-align: middle;
content: '';
width: 40rpx;
height: 40rpx;
background-color: #ddd;
animation: rotate 1s linear infinite;
}
.loading.complete:before {
display: none;
}
.back-top-button {
width: 100rpx;
height: 100rpx;
border-radius: 50rpx;
position: absolute;
right: 40rpx;
bottom: 200rpx;
background-color: rgba(0, 0, 0, 0.5)
}
(3) demo.js
// pages/demo/demo.js
let Mock = require('../../lib/dist/mock.js');
/*数据源来自于mock.js数据，调用url: http://rapapi.org/mockjs/17332/api/list?accessToken=l
// mock.js =>> 自己去mock.js官网下载并项目导入，这里只是解析数据
// 因为是 http协议传输，小程序是https , 你需要先小程序开发工具勾选不校验安全域名才能获取到数据
*/
Page({
data: {
screenHeight: 0,
requestOrderList: [], // 获取订单的数据
requestPageNum: 1, // 设置加载的第几次，默认是第一次
callbackcount: 10, //返回数据的个数 ，前端自己可以定制返回数据的个数
requestLoading: false, //"上拉加载"的变量，默认false，隐藏
requestLoadingComplete: false //“没有数据”的变量，默认false，隐藏
},
/**
* 请求数据封装
*/
fetchOrderList: function () {
let that = this;
let requestPageNum = this.data.requestPageNum, // 第几次加载数据(第几页)
callbackcount = this.data.callbackcount; //返回数据的个数(一次性取数据的个数)
wx.request({
url: 'http://rapapi.org/mockjs/17332/api/list?accessToken=l',
data: {
pageNum: requestPageNum,
pageSize: callbackcount
},
success: function (res) {
let resData = Mock.mock(res.data.data);
let pageNum = Math.ceil(resData.info.total / resData.info.pageSize); //rap数据总页码
console.log(resData, 'rap数据');
console.log(pageNum, 'rap数据总页码');
console.log(that.data.requestPageNum, '当前第几页')
let screenHeight = that.data.screenHeight;
let screenOrderNum = parseInt(screenHeight / 150);
console.log(screenOrderNum, '满屏最多能放几个卡片')
// 9 >= 1, 2, 3 知道 currentPage 大于 rap数据总页码
if (pageNum >= that.data.requestPageNum && (resData.results.length > screenOrderNum)) {
that.setData({
requestLoading: true,
requestOrderList: that.data.requestOrderList.concat(resData.results)
});
} else if (pageNum >= that.data.requestPageNum && (resData.results.length <= screenOrderNum)) {
that.setData({
requestLoadingComplete: false,
requestLoading: false,
requestOrderList: that.data.requestOrderList.concat(resData.results)
})
} else {
that.setData({
requestLoadingComplete: true,
requestLoading: false
})
}
wx.hideLoading();
wx.stopPullDownRefresh();
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 获取系统高度，判断正在加载中是否显示, 每个卡片的高度是300rpx;
let that = this;
wx.getSystemInfo({
success: function (res) {
console.log(res.windowHeight, 'screenHeight')
that.setData({
screenHeight: res.windowHeight
})
},
})
this.fetchOrderList(); // 第一次请求数据
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log("page下拉动作")
wx.showLoading({
title: '努力加载中',
});
this.setData({
requestPageNum: 1,
requestOrderList: [],
requestLoading: false,
requestLoadingComplete: false
});
this.fetchOrderList();
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log("page上拉触底")
let that = this;
if (that.data.requestLoading && !that.data.requestLoadingComplete) {
that.setData({
requestPageNum: that.data.requestPageNum + 1, //每次触发上拉事件，把requestPageNum+1
})
that.fetchOrderList();
}
}
})
(3) wx.json 中开启下拉属性,否则不能调用页面下拉刷新
{
"enablePullDownRefresh": true
}
3、效果图
gifeditor_20180303_135924.gif
初次编写如有意见请指点
