news.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. Page({
  2. data: {
  3. currentIndex: 0,
  4. mainHeight: 600,
  5. //分类数据
  6. tabsAll: [],
  7. tabs: [],
  8. // 新闻信息保存数组
  9. newsAll: [],
  10. // 每个选项卡对应的分页
  11. pages: [],
  12. // 加载状态
  13. loadingTypes: [],
  14. // 每个滚动区域的滚动值
  15. scrollTops: []
  16. },
  17. onReady: function () {
  18. setTimeout(() => {
  19. wx.createSelectorQuery().select('#gBody').fields(
  20. { size: true }, (res) => {
  21. this.setData({ mainHeight: res.height });
  22. }
  23. ).exec();
  24. }, 1000);
  25. //加载分类信息 初始化数据
  26. this.getCate();
  27. },
  28. navChange: function (e) {
  29. this.setData({ currentIndex: e.detail });
  30. },
  31. swiperChange: function (e) {
  32. var index = e.detail.current;
  33. this.setData({ currentIndex: index });
  34. if (this.data.loadingTypes[this.data.currentIndex] != 2 || this.data.loadingTypes[this.ata.currentIndex] != 4) { this.getNews(); }
  35. },
  36. //加载分类信息 初始化数据
  37. getCate: function () {
  38. wx.request({
  39. // 此处可以获取分类 根据分类自己拼接请求地址
  40. // 格式请参考 接口 [ 浏览器运行直接查看 ]
  41. url: 'http://grace.hcoder.net/api/tabs',
  42. method: 'GET',
  43. data: {},
  44. success: res => {
  45. // 初始化新闻列表数组 元素数量与分类匹配
  46. this.data.tabsAll = res.data.data;
  47. for (var i = 0; i < this.data.tabsAll.length; i++) {
  48. this.data.newsAll.push([]);
  49. this.data.tabs.push(this.data.tabsAll[i].txt);
  50. this.data.pages.push(1);
  51. this.data.loadingTypes.push(3);
  52. this.data.scrollTops.push(0);
  53. }
  54. this.setData({
  55. newsAll: this.data.newsAll,
  56. tabs: this.data.tabs,
  57. pages: this.data.pages,
  58. loadingTypes: this.data.loadingTypes,
  59. scrollTops: this.data.scrollTops
  60. });
  61. this.getNews();
  62. }
  63. });
  64. },
  65. // 加载新闻
  66. getNews: function (isReload) {
  67. // 当前正在展示的 选项index 为 this.data.currentIndex
  68. // 那么分类 id 应该为 this.data.tabsAll[this.data.currentIndex].id
  69. //console.log('类型 : ' + this.tabs[this.data.currentIndex] + ' 第'+ this.data.pages[this.data.currentIndex] +'页');
  70. if (!isReload) {
  71. this.data.loadingTypes.splice(this.data.currentIndex, 1, 1);
  72. this.setData({ loadingTypes: this.data.loadingTypes });
  73. }
  74. //console.log('http://grace.hcoder.net/api/news/index/'+this.data.tabsAll[this.data.currentIndex].id+'/'+this.data.pages[this.data.currentIndex]);
  75. wx.request({
  76. // 此处可以获取分类 根据分类自己拼接请求地址
  77. // 分类 id 、页码 都已经获取到了
  78. url: 'http://grace.hcoder.net/api/news/index/' + this.data.tabsAll[this.data.currentIndex].id + '/' + this.data.pages[this.data.currentIndex],
  79. method: 'GET',
  80. data: {},
  81. success: res => {
  82. if (res.data.status == 'ok') {
  83. // 第一页
  84. if (this.data.pages[this.data.currentIndex] == 1) {
  85. this.data.newsAll.splice(this.data.currentIndex, 1, res.data.data);
  86. this.setData({ newsAll: this.data.newsAll });
  87. }
  88. // 之后的加载页
  89. else {
  90. this.data.newsAll[this.data.currentIndex] = this.data.newsAll[this.data.currentIndex].concat(res.data.data);
  91. this.setData({ newsAll: this.data.newsAll });
  92. }
  93. // 页码增加
  94. this.data.pages[this.data.currentIndex]++;
  95. this.setData({ pages: this.data.pages });
  96. setTimeout(() => {
  97. this.data.loadingTypes.splice(this.data.currentIndex, 1, 3);
  98. this.setData({ loadingTypes: this.data.loadingTypes });
  99. }, 300)
  100. } else if (res.data.status == 'empty') {
  101. console.log('empty');
  102. this.data.newsAll[this.data.currentIndex] = 'empty';
  103. this.data.loadingTypes.splice(this.data.currentIndex, 1, 4);
  104. this.setData({ newsAll: this.data.newsAll, loadingTypes: this.data.loadingTypes });
  105. } else if (res.data.status == 'nomore') {
  106. console.log('nomore');
  107. this.data.loadingTypes.splice(this.data.currentIndex, 1, 2);
  108. this.setData({ loadingTypes: this.data.loadingTypes });
  109. }
  110. },
  111. complete: () => {
  112. if (isReload) {
  113. setTimeout(() => {
  114. this.selectComponent("#graceReload" + this.data.currentIndex).endReload();
  115. }, 300)
  116. }
  117. }
  118. });
  119. },
  120. // 加载更多
  121. scrollend: function (e) {
  122. // 判断加载状态避免多次滚动时有加载尚未完成
  123. if (this.data.loadingTypes[this.data.currentIndex] == 2 || this.data.loadingTypes[this.data.currentIndex] == 4) { return false; }
  124. console.log('loadmore.....');
  125. this.getNews();
  126. },
  127. scroll: function (e) {
  128. this.data.scrollTops[this.data.currentIndex] = e.detail.scrollTop;
  129. this.setData({ scrollTops: this.data.scrollTops });
  130. },
  131. touchstart: function (e) {
  132. var touchObj = { scrollTop: this.data.scrollTops[this.data.currentIndex], moveY: e.changedTouches[0].pageY };
  133. this.selectComponent("#graceReload" + this.data.currentIndex).touchstart(touchObj);
  134. },
  135. touchmove: function (e) {
  136. var touchObj = { scrollTop: this.data.scrollTops[this.data.currentIndex], moveY: e.changedTouches[0].pageY };
  137. this.selectComponent("#graceReload" + this.data.currentIndex).touchmove(touchObj);
  138. },
  139. touchend: function (e) {
  140. var touchObj = { scrollTop: this.data.scrollTops[this.data.currentIndex], moveY: e.changedTouches[0].pageY };
  141. this.selectComponent("#graceReload" + this.data.currentIndex).touchend(touchObj);
  142. },
  143. // 下拉刷新
  144. reload: function () {
  145. this.data.pages[this.data.currentIndex] = 1;
  146. this.data.loadingTypes.splice(this.data.currentIndex, 1, 3);
  147. this.setData({
  148. pages: this.data.pages,
  149. loadingTypes: this.data.loadingTypes
  150. });
  151. this.getNews(1);
  152. },
  153. newsinfo:function(){
  154. wx.navigateTo({
  155. url:"../artInfo/artInfo"
  156. })
  157. }
  158. })