wxd / MShopWeApp

Commit 5a2a5d3e9c97a855e8dc13bf0da5239eb0e92891

Authored by 后端研发-倪永富
1 parent 7e0c9671

下拉刷新，上拉加载更多完成

Inline Side-by-side
Showing 3 changed files with 126 additions and 47 deletions
packageA/pages/liveStream/liveStream.js
  View file @5a2a5d3
1 1 // pages/liveStream/liveStream.js
2   -
3 2 var t = require("../../../utils/util"),
4 3 ut = t,
5 4 e = require("../../../utils/common.js"),
... ... @@ -10,20 +9,19 @@ var t = require("../../../utils/util"),
10 9 oo = s.globalData,
11 10 o = s.globalData.setting,
12 11 os = o;
13   -var utils = require('../../../utils/util.js'),ut=utils;
14 12 var regeneratorRuntime = require('../../../utils/runtime.js');
15 13  
16 14 Page({
17   -
18 15 /**
19 16 * 页面的初始数据
20 17 */
21 18 data: {
22   - goodsList: [],
23   - imghost: '',
24   - liveList: {}
  19 + curPage: 1,
  20 + pageNum: 0,
  21 + list: [],
  22 + live: {}
25 23 },
26   -
  24 +
27 25 // 点击直播列表项
28 26 clickItem: function (e) {
29 27 // id：列表项id
... ... @@ -32,66 +30,117 @@ Page({
32 30 url: '/packageA/pages/liveStreamDetails/liveStreamDetails?id=' + e.currentTarget.dataset.id + '&live=' + e.currentTarget.dataset.live
33 31 })
34 32 console.log('options-->');
35   - },
  33 + },
36 34  
37 35 // 点击 订阅/观看直播/观看回放 按钮，跳转直播组件
38 36 clickLive: function (e) {
39   - console.log('当前房间号roomid：',e.currentTarget.dataset.roomid);
  37 + console.log('当前房间号roomid：', e.currentTarget.dataset.roomid);
40 38 let roomId = e.currentTarget.dataset.roomid;
41   - let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 }));
  39 + let customParams = encodeURIComponent(JSON.stringify({
  40 + path: 'pages/index/index',
  41 + pid: 1
  42 + }));
42 43 wx.navigateTo({
43 44 url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
44 45 })
45 46 },
46 47  
47   - /**
48   - * 生命周期函数--监听页面加载
49   - */
50   - onLoad: function (options) {
  48 + updateLiveList: function () {
  49 + return new Promise((resolve, reject) => {
  50 + let self = this;
  51 + getApp().request.put("/api/weshop/wx/livelist/updatelivelist", {
  52 + data: {
  53 + storeId: 1
  54 + },
  55 + success: function (res) {
  56 + console.log('我发起了PUT请求,请求结果：', res.data);
  57 + resolve();
  58 + }
  59 + });
  60 + });
  61 + },
  62 +
  63 + loadLiveList: function (curPage) {
  64 + // console.log('---->curPage', curPage);
51 65 var live = {};
52 66 live.toBegin = []; // 即将开始
53   - live.ing = []; // 直播中
54   - live.over = []; // 已结束
  67 + live.ing = []; // 直播中
  68 + live.over = []; // 已结束
  69 + var that = this;
  70 + var storeId = o.stoid;
55 71  
56 72 // 请求数据
57   - var that = this;
58   - getApp().request.promiseGet("/api/weshop/wx/livelist/page", {}).then(res=>{
59   - console.log('ressss--->',res);
60   - if(res.data.code==0){
61   - that.setData({
62   - goodsList: res.data.data.pageData
63   - })
64   - }
65   - // console.log(goodsList);
66   -
67   - var result = res.data.data.pageData;
68   - var liveStatus;
69   - if(res.data.code == 0) {
70   - for(var i in result) {
71   - console.log(i + '当前直播状态：', result[i].live_status);
72   - liveStatus = result[i].live_status;
73   - // 这里只显示101/102/103状态
  73 + getApp().request.promiseGet("/api/weshop/wx/livelist/page", {
  74 + data: {
  75 + storedId: storeId,
  76 + page: curPage
  77 + }
  78 + }).then(res => {
  79 + if (res.data.code == 0) {
  80 + // 计算总页数
  81 + var total = res.data.data.total;
  82 + var pageSize = res.data.data.pageSize;
  83 + var pageNum = total % pageSize;
  84 + that.setData({
  85 + pageNum: pageNum
  86 + });
  87 +
  88 + // 如果当前请求的是第一页数据，则执行赋值，否则执行合并再赋值
  89 + if(curPage == 1) {
  90 + that.setData({
  91 + list: res.data.data.pageData
  92 + // 测试
  93 + // list: that.data.list.concat(res.data.data.pageData)
  94 + });
  95 + } else {
  96 + that.setData({
  97 + list: that.data.list.concat(res.data.data.pageData)
  98 + });
  99 + };
  100 +
  101 + var list = that.data.list;
  102 + for(var i in list) {
  103 + var liveStatus = list[i].live_status;
74 104 if (liveStatus == '101') {
75   - live.ing.push(result[i]);
  105 + live.ing.push(list[i]);
76 106 } else if (liveStatus == '102') {
77   - live.toBegin.push(result[i]);
  107 + live.toBegin.push(list[i]);
78 108 } else if (liveStatus == '103') {
79   - live.over.push(result[i]);
  109 + live.over.push(list[i]);
80 110 }
81 111 }
82   - // console.log('live--->', live);
  112 +
83 113 that.setData({
84 114 live
85 115 });
  116 +
  117 + curPage ++;
  118 + that.setData({
  119 + curPage
  120 + });
  121 +
  122 + } else {
  123 + console.error('请求失败！！！！！');
86 124 }
87 125 })
88 126 },
89 127  
  128 +
  129 + /**
  130 + * 生命周期函数--监听页面加载
  131 + */
  132 + onLoad: function (options) {
  133 +
  134 + },
  135 +
90 136 /**
91 137 * 生命周期函数--监听页面初次渲染完成
92 138 */
93 139 onReady: function () {
94   -
  140 + var self = this;
  141 + this.updateLiveList().then(() => {
  142 + self.loadLiveList(1);
  143 + });
95 144 },
96 145  
97 146 /**
... ... @@ -119,14 +168,38 @@ Page({
119 168 * 页面相关事件处理函数--监听用户下拉动作
120 169 */
121 170 onPullDownRefresh: function () {
122   -
  171 + var self = this;
  172 + wx.showNavigationBarLoading(); //在标题栏中显示加载
  173 + setTimeout(function() {
  174 + self.loadLiveList(1);
  175 + wx.hideNavigationBarLoading(); //完成停止加载
  176 + wx.stopPullDownRefresh(); //停止下拉刷新
  177 + }, 500);
123 178 },
124   -
125 179 /**
126 180 * 页面上拉触底事件的处理函数
127 181 */
128 182 onReachBottom: function () {
129   -
  183 + var self = this;
  184 + var curPage = this.data.curPage;
  185 + var pageNum = this.data.pageNum;
  186 +
  187 + if(curPage <= pageNum) {
  188 + wx.showLoading({
  189 + title: '加载中...',
  190 + })
  191 + setTimeout(function() {
  192 + self.loadLiveList(curPage);
  193 + wx.hideLoading();
  194 + }, 500);
  195 +
  196 + } else {
  197 + wx.showToast({
  198 + title: '已经到底啦~',
  199 + duration: 1000
  200 + })
  201 + }
  202 + console.log('当前curpage',curPage);
130 203 },
131 204  
132 205 /**
... ... @@ -152,5 +225,6 @@ Page({
152 225 title: '直播列表'
153 226 // path: '/page/user?id=123'
154 227 }
155   - }
  228 + },
  229 +
156 230 })
157 231 \ No newline at end of file
... ...
packageA/pages/liveStream/liveStream.json
  View file @5a2a5d3
... ... @@ -2,5 +2,10 @@
2 2 "usingComponents": {
3 3 "subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe"
4 4 },
5   - "navigationBarTitleText": "直播"
6   -}
7 5 \ No newline at end of file
  6 + "navigationBarTitleText": "直播",
  7 + "enablePullDownRefresh": true,
  8 + "backgroundColor": "#eee",
  9 + "backgroundTextStyle": "dark",
  10 + "onReachBottomDistance": 300
  11 +}
  12 +
8 13 \ No newline at end of file
... ...
packageA/pages/liveStream/liveStream.wxml
  View file @5a2a5d3
... ... @@ -6,7 +6,7 @@
6 6 <block wx:if="{{live.toBegin.length > 0}}">
7 7 <view class="title">即将开始</view>
8 8 <view class="list">
9   - <block wx:for="{{live.toBegin}}">
  9 + <block wx:for="{{live.toBegin}}" wx:key="item">
10 10 <view class="list-item" data-id="{{item.id}}" data-live="toBegin" catchtap="clickItem">
11 11 <view class="list-item-left">
12 12 <image src="{{item.share_img}}" class="item-pic" mode="aspectFill"></image>
... ... @@ -30,7 +30,7 @@
30 30 <block wx:if="{{live.ing.length > 0}}">
31 31 <view class="title">直播中</view>
32 32 <view class="list">
33   - <block wx:for="{{live.ing}}">
  33 + <block wx:for="{{live.ing}}" wx:key="item">
34 34 <view class="list-item" catchtap="clickItem" data-id="{{item.id}}" data-live="ing">
35 35 <view class="list-item-left">
36 36 <image src="{{item.share_img}}" class="item-pic" mode="aspectFill"></image>
... ... @@ -53,7 +53,7 @@
53 53 <block wx:if="{{live.over.length > 0}}">
54 54 <view class="title">精彩回放</view>
55 55 <view class="list">
56   - <block wx:for="{{live.over}}">
  56 + <block wx:for="{{live.over}}" wx:key="item">
57 57 <view class="list-item" bindtap="clickItem" data-id="{{item.id}}" data-live="over">
58 58 <view class="list-item-left">
59 59 <image src="{{item.share_img}}" class="item-pic" mode="aspectFill"></image>
... ...