|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 本篇文章給大家帶來的內容是關于微信小程序中實現頁面下拉刷新和上拉加載更多的代碼示例,有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。查看文檔,在用page()函數注冊頁面的時候有這樣的兩個對象參數用戶判斷用戶在最頂部下拉和到達最底部 在小程序里,用戶頂部下拉是默認禁止的,我們需要把他設置為啟用,在app.json中的設置對所有頁面有效,在單獨頁面設置則對當前頁面有效; index.json {
"enablePullDownRefresh": true,
"onPullDownRefresh": true,
"onReachBottom": true
}如果看不到下拉動畫,需要在 app.json 中設置 "window": {
"backgroundTextStyle": "dark"
},接下來就是寫 js 代碼了 下拉刷新 /**
* 下拉刷新恢復初始化
*/
onPullDownRefresh: function () {
var self = this;
// 刷新清空搜索框
self.data.wxSearchData.value = '';
self.setData({
wxSearchData: self.data.wxSearchData
})
// 初始化列表
app.globalData.allData = null;
// app.globalData.findData = null;
// 初始頁數設置為1
app.globalData.currentPage = 1;
var _currentPage = app.globalData.currentPage;
// 搜索關鍵字
app.globalData.findData = '';
var _find = app.globalData.findData;
// 10位數時間戳
var _timeStamp = Date.parse(new Date());
_timeStamp = _timeStamp / 1000;
// 秘鑰
var _tokenKey = _timeStamp + "xxx" + "127.0.0.1" + _find;
_tokenKey = key.md5(_tokenKey);
wx.request({
url: 'https://xxx:9090/v1/Tools/UserModel/GetUserList/',
data: {
find: _find,
tokenKey: _tokenKey,
timeStamp: _timeStamp,
currentPage: _currentPage,
},
method: "GET",
header: {
"Content-Type": "application/json",
},
success: function (res) {
app.globalData.allData = res.data.datas;
// console.log(res)
self.setData({
list: res.data.datas
})
// 顯示頂部刷新圖標
wx.showNavigationBarLoading();
// 隱藏導航欄加載框
wx.hideNavigationBarLoading();
// 停止下拉動作
wx.stopPullDownRefresh();
},
fail: function () {
console.log("error")
}
})
},上拉加載更多 /**
* 上拉刷新觸底加載更多
*/
onReachBottom: function () {
var self = this;
// 顯示加載圖標
wx.showLoading({
title: '玩命加載中',
})
// 頁數+1
app.globalData.currentPage ++;
var _currentPage = app.globalData.currentPage;
// 搜索關鍵字
var _find = app.globalData.findData;
// 10位數時間戳
var _timeStamp = Date.parse(new Date());
_timeStamp = _timeStamp / 1000;
// 秘鑰
var _tokenKey = _timeStamp + "xxx" + "127.0.0.1" + _find;
_tokenKey = key.md5(_tokenKey);
wx.request({
url: 'https://api.xxx.com:9090/v1/Tools/UserModel/GetUserList/',
data: {
find: _find,
tokenKey: _tokenKey,
timeStamp: _timeStamp,
currentPage: _currentPage,
},
method: "GET",
header: {
"Content-Type": "application/json",
},
success: function (res) {
// 回調函數,將新數據壓到隊列里
for (var i = 0; i < res.data.each_page; i++) {
app.globalData.allData.push(res.data.datas[i]);
}
// 設置數據
self.setData({
list: app.globalData.allData
})
// 隱藏加載框
wx.hideLoading();
},
fail: function () {
console.log("error")
}
})
},相關推薦: 以上就是微信小程序中實現頁面下拉刷新和上拉加載更多的代碼示例的詳細內容,更多請關注php中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!