이 글의 내용은 WeChat 미니 프로그램에서 페이지 풀다운 새로 고침 및 풀업 로딩을 구현하기 위한 코드 예제에 대한 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 너. .
문서 보기 page() 함수로 페이지를 등록할 때 이렇게 두 개의 개체 매개변수가 있습니다. 미니 프로그램에서 사용자가 위쪽을 아래로 끌어내리고 아래쪽으로 도달하는지 여부를 결정합니다. , 사용자 상단 풀다운은 기본적으로 비활성화되어 있습니다. 예, app.json의 설정은 모든 페이지에 적용되며 단일 페이지의 설정은 현재 페이지에 적용됩니다. .json{
"enablePullDownRefresh": true,
"onPullDownRefresh": true,
"onReachBottom": true
}
"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") } }) },
관련 권장 사항:
WeChat 애플릿에서 전역 변수(코드)를 설정하는 방법WeChat 애플릿에서 로컬 인터페이스를 호출하는 방법에서 동기 요청을 구현하는 방법 위챗 애플릿
위 내용은 WeChat 미니 프로그램에서 페이지 풀다운 새로 고침 및 풀업 로딩을 구현하기 위한 추가 코드 예제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!