From 5a2a5d3e9c97a855e8dc13bf0da5239eb0e92891 Mon Sep 17 00:00:00 2001 From: taiyuan Date: Wed, 15 Jul 2020 11:06:20 +0800 Subject: [PATCH] 下拉刷新，上拉加载更多完成 --- packageA/pages/liveStream/liveStream.js | 158 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------------------ packageA/pages/liveStream/liveStream.json | 9 +++++++-- packageA/pages/liveStream/liveStream.wxml | 6 +++--- 3 files changed, 126 insertions(+), 47 deletions(-) diff --git a/packageA/pages/liveStream/liveStream.js b/packageA/pages/liveStream/liveStream.js index 3665dfc..4fa2d01 100644 --- a/packageA/pages/liveStream/liveStream.js +++ b/packageA/pages/liveStream/liveStream.js @@ -1,5 +1,4 @@ // pages/liveStream/liveStream.js - var t = require("../../../utils/util"), ut = t, e = require("../../../utils/common.js"), @@ -10,20 +9,19 @@ var t = require("../../../utils/util"), oo = s.globalData, o = s.globalData.setting, os = o; -var utils = require('../../../utils/util.js'),ut=utils; var regeneratorRuntime = require('../../../utils/runtime.js'); Page({ - /** * 页面的初始数据 */ data: { - goodsList: [], - imghost: '', - liveList: {} + curPage: 1, + pageNum: 0, + list: [], + live: {} }, - + // 点击直播列表项 clickItem: function (e) { // id：列表项id @@ -32,66 +30,117 @@ Page({ url: '/packageA/pages/liveStreamDetails/liveStreamDetails?id=' + e.currentTarget.dataset.id + '&live=' + e.currentTarget.dataset.live }) console.log('options-->'); - }, + }, // 点击 订阅/观看直播/观看回放 按钮，跳转直播组件 clickLive: function (e) { - console.log('当前房间号roomid：',e.currentTarget.dataset.roomid); + console.log('当前房间号roomid：', e.currentTarget.dataset.roomid); let roomId = e.currentTarget.dataset.roomid; - let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })); + let customParams = encodeURIComponent(JSON.stringify({ + path: 'pages/index/index', + pid: 1 + })); wx.navigateTo({ url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}` }) }, - /** - * 生命周期函数--监听页面加载 - */ - onLoad: function (options) { + updateLiveList: function () { + return new Promise((resolve, reject) => { + let self = this; + getApp().request.put("/api/weshop/wx/livelist/updatelivelist", { + data: { + storeId: 1 + }, + success: function (res) { + console.log('我发起了PUT请求,请求结果：', res.data); + resolve(); + } + }); + }); + }, + + loadLiveList: function (curPage) { + // console.log('---->curPage', curPage); var live = {}; live.toBegin = []; // 即将开始 - live.ing = []; // 直播中 - live.over = []; // 已结束 + live.ing = []; // 直播中 + live.over = []; // 已结束 + var that = this; + var storeId = o.stoid; // 请求数据 - var that = this; - getApp().request.promiseGet("/api/weshop/wx/livelist/page", {}).then(res=>{ - console.log('ressss--->',res); - if(res.data.code==0){ - that.setData({ - goodsList: res.data.data.pageData - }) - } - // console.log(goodsList); - - var result = res.data.data.pageData; - var liveStatus; - if(res.data.code == 0) { - for(var i in result) { - console.log(i + '当前直播状态：', result[i].live_status); - liveStatus = result[i].live_status; - // 这里只显示101/102/103状态 + getApp().request.promiseGet("/api/weshop/wx/livelist/page", { + data: { + storedId: storeId, + page: curPage + } + }).then(res => { + if (res.data.code == 0) { + // 计算总页数 + var total = res.data.data.total; + var pageSize = res.data.data.pageSize; + var pageNum = total % pageSize; + that.setData({ + pageNum: pageNum + }); + + // 如果当前请求的是第一页数据，则执行赋值，否则执行合并再赋值 + if(curPage == 1) { + that.setData({ + list: res.data.data.pageData + // 测试 + // list: that.data.list.concat(res.data.data.pageData) + }); + } else { + that.setData({ + list: that.data.list.concat(res.data.data.pageData) + }); + }; + + var list = that.data.list; + for(var i in list) { + var liveStatus = list[i].live_status; if (liveStatus == '101') { - live.ing.push(result[i]); + live.ing.push(list[i]); } else if (liveStatus == '102') { - live.toBegin.push(result[i]); + live.toBegin.push(list[i]); } else if (liveStatus == '103') { - live.over.push(result[i]); + live.over.push(list[i]); } } - // console.log('live--->', live); + that.setData({ live }); + + curPage ++; + that.setData({ + curPage + }); + + } else { + console.error('请求失败！！！！！'); } }) }, + + /** + * 生命周期函数--监听页面加载 + */ + onLoad: function (options) { + + }, + /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { - + var self = this; + this.updateLiveList().then(() => { + self.loadLiveList(1); + }); }, /** @@ -119,14 +168,38 @@ Page({ * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { - + var self = this; + wx.showNavigationBarLoading(); //在标题栏中显示加载 + setTimeout(function() { + self.loadLiveList(1); + wx.hideNavigationBarLoading(); //完成停止加载 + wx.stopPullDownRefresh(); //停止下拉刷新 + }, 500); }, - /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { - + var self = this; + var curPage = this.data.curPage; + var pageNum = this.data.pageNum; + + if(curPage <= pageNum) { + wx.showLoading({ + title: '加载中...', + }) + setTimeout(function() { + self.loadLiveList(curPage); + wx.hideLoading(); + }, 500); + + } else { + wx.showToast({ + title: '已经到底啦~', + duration: 1000 + }) + } + console.log('当前curpage',curPage); }, /** @@ -152,5 +225,6 @@ Page({ title: '直播列表' // path: '/page/user?id=123' } - } + }, + }) \ No newline at end of file diff --git a/packageA/pages/liveStream/liveStream.json b/packageA/pages/liveStream/liveStream.json index e54bca5..0186e3c 100644 --- a/packageA/pages/liveStream/liveStream.json +++ b/packageA/pages/liveStream/liveStream.json @@ -2,5 +2,10 @@ "usingComponents": { "subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe" }, - "navigationBarTitleText": "直播" -} \ No newline at end of file + "navigationBarTitleText": "直播", + "enablePullDownRefresh": true, + "backgroundColor": "#eee", + "backgroundTextStyle": "dark", + "onReachBottomDistance": 300 +} + \ No newline at end of file diff --git a/packageA/pages/liveStream/liveStream.wxml b/packageA/pages/liveStream/liveStream.wxml index a5e8e5f..f315143 100644 --- a/packageA/pages/liveStream/liveStream.wxml +++ b/packageA/pages/liveStream/liveStream.wxml @@ -6,7 +6,7 @@ 即将开始 - + @@ -30,7 +30,7 @@ 直播中 - + @@ -53,7 +53,7 @@ 精彩回放 - + -- libgit2 0.21.4