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');
/*數(shù)據(jù)源來自于mock.js數(shù)據(jù)蝇摸，調(diào)用url: http://rapapi.org/mockjs/17332/api/list?accessToken=l
// mock.js =>> 自己去mock.js官網(wǎng)下載并項目導入橘洞，這里只是解析數(shù)據(jù)
// 因為是 http協(xié)議傳輸捌袜，小程序是https , 你需要先小程序開發(fā)工具勾選不校驗安全域名才能獲取到數(shù)據(jù)
*/
Page({
data: {
screenHeight: 0,
requestOrderList: [], // 獲取訂單的數(shù)據(jù)
requestPageNum: 1, // 設置加載的第幾次，默認是第一次
callbackcount: 10, //返回數(shù)據(jù)的個數(shù) 震檩，前端自己可以定制返回數(shù)據(jù)的個數(shù)
requestLoading: false, //"上拉加載"的變量琢蛤，默認false蜓堕，隱藏
requestLoadingComplete: false //“沒有數(shù)據(jù)”的變量，默認false博其，隱藏
},
/**
* 請求數(shù)據(jù)封裝
*/
fetchOrderList: function () {
let that = this;
let requestPageNum = this.data.requestPageNum, // 第幾次加載數(shù)據(jù)(第幾頁)
callbackcount = this.data.callbackcount; //返回數(shù)據(jù)的個數(shù)(一次性取數(shù)據(jù)的個數(shù))
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數(shù)據(jù)總頁碼
console.log(resData, 'rap數(shù)據(jù)');
console.log(pageNum, 'rap數(shù)據(jù)總頁碼');
console.log(that.data.requestPageNum, '當前第幾頁')
let screenHeight = that.data.screenHeight;
let screenOrderNum = parseInt(screenHeight / 150);
console.log(screenOrderNum, '滿屏最多能放幾個卡片')
// 9 >= 1, 2, 3 知道 currentPage 大于 rap數(shù)據(jù)總頁碼
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();
}
})
},
/**
* 生命周期函數(shù)--監(jiān)聽頁面加載
*/
onLoad: function (options) {
// 獲取系統(tǒng)高度套才，判斷正在加載中是否顯示, 每個卡片的高度是300rpx;
let that = this;
wx.getSystemInfo({
success: function (res) {
console.log(res.windowHeight, 'screenHeight')
that.setData({
screenHeight: res.windowHeight
})
},
})
this.fetchOrderList(); // 第一次請求數(shù)據(jù)
},
/**
* 頁面相關事件處理函數(shù)--監(jiān)聽用戶下拉動作
*/
onPullDownRefresh: function () {
console.log("page下拉動作")
wx.showLoading({
title: '努力加載中',
});
this.setData({
requestPageNum: 1,
requestOrderList: [],
requestLoading: false,
requestLoadingComplete: false
});
this.fetchOrderList();
},
/**
* 頁面上拉觸底事件的處理函數(shù)
*/
onReachBottom: function () {
console.log("page上拉觸底")
let that = this;
if (that.data.requestLoading && !that.data.requestLoadingComplete) {
that.setData({
requestPageNum: that.data.requestPageNum + 1, //每次觸發(fā)上拉事件，把requestPageNum+1
})
that.fetchOrderList();
}
}
})
(3) wx.json 中開啟下拉屬性,否則不能調(diào)用頁面下拉刷新
{
"enablePullDownRefresh": true
}
3慕淡、效果圖
gifeditor_20180303_135924.gif
初次編寫如有意見請指點
