index.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252
  1. <template>
  2. <mescroll-body ref="mescrollRef" :sticky="true" @init="mescrollInit" :down="{ use: false }" :up="upOption" @up="upCallback">
  3. <!-- 分类列表tab -->
  4. <view class="tabs-wrapper">
  5. <scroll-view class="scroll-view" scroll-x>
  6. <view class="tab-item" :class="{ active: curId == 0 }" @click="onSwitchTab(0)">
  7. <view class="value"><text>全部文章</text></view>
  8. </view>
  9. <!-- 分类列表 -->
  10. <view class="tab-item" :class="{ active: curId == item.categoryId }" @click="onSwitchTab(item.id)"
  11. v-for="(item, index) in categoryList" :key="index">
  12. <view class="value"><text>{{ item.name }}</text></view>
  13. </view>
  14. </scroll-view>
  15. </view>
  16. <!-- 文章列表 -->
  17. <view class="article-list">
  18. <view class="article-item show-type" v-for="(item, index) in list.content" :key="index" @click="onTargetDetail(item.id)">
  19. <block>
  20. <view class="article-item-left flex-box">
  21. <view class="article-item-title twolist-hidden">
  22. <text>{{ item.title }}</text>
  23. </view>
  24. <view class="article-item-footer m-top10">
  25. <text class="article-views f-24 col-8">{{ item.click }}次浏览</text>
  26. </view>
  27. </view>
  28. <view class="article-item-image">
  29. <image class="image" :src="item.image"></image>
  30. </view>
  31. </block>
  32. </view>
  33. </view>
  34. </mescroll-body>
  35. </template>
  36. <script>
  37. import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue'
  38. import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins'
  39. import * as ArticleApi from '@/api/article'
  40. import { getEmptyPaginateObj, getMoreListData } from '@/utils/app'
  41. const pageSize = 15
  42. export default {
  43. components: {
  44. MescrollBody
  45. },
  46. mixins: [MescrollMixin],
  47. data() {
  48. return {
  49. // 分类列表
  50. categoryList: [],
  51. // 文章列表
  52. list: getEmptyPaginateObj(),
  53. // 当前选中的分类id (0则代表首页)
  54. curId: 0,
  55. // 上拉加载配置
  56. upOption: {
  57. // 首次自动执行
  58. auto: true,
  59. // 每页数据的数量; 默认10
  60. page: { size: pageSize },
  61. // 数量要大于3条才显示无更多数据
  62. noMoreSize: 3,
  63. }
  64. }
  65. },
  66. /**
  67. * 生命周期函数--监听页面加载
  68. */
  69. onLoad(options) {
  70. const app = this;
  71. if (options.categoryId) {
  72. app.curId = options.categoryId;
  73. }
  74. // 获取文章分类数据
  75. // app.getCategoryList();
  76. },
  77. methods: {
  78. /**
  79. * 上拉加载的回调 (页面初始化时也会执行一次)
  80. * 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
  81. * @param {Object} page
  82. */
  83. upCallback(page) {
  84. const app = this;
  85. // 设置列表数据
  86. app.getArticleList(page.num)
  87. .then(list => {
  88. const curPageLen = list.content.length;
  89. const totalSize = list.content.totalElements;
  90. app.mescroll.endBySize(curPageLen, totalSize);
  91. })
  92. .catch(() => app.mescroll.endErr());
  93. },
  94. // 获取文章分类数据
  95. getCategoryList() {
  96. const app = this;
  97. ArticleApi.cateList()
  98. .then(result => {
  99. app.categoryList = result.data.list;
  100. })
  101. },
  102. /**
  103. * 获取文章列表
  104. * @param {Number} pageNo 页码
  105. */
  106. getArticleList(pageNo = 1) {
  107. const app = this
  108. return new Promise((resolve, reject) => {
  109. ArticleApi.list({ categoryId: app.curId, page: pageNo }, { load: false })
  110. .then(result => {
  111. // 合并新数据
  112. const newList = result.data;
  113. app.list.content = getMoreListData(newList, app.list, pageNo);
  114. resolve(newList);
  115. })
  116. .catch(result => reject());
  117. })
  118. },
  119. // 切换选择的分类
  120. onSwitchTab(categoryId = 0) {
  121. const app = this;
  122. // 切换当前的分类ID
  123. app.curId = categoryId;
  124. // 刷新列表数据
  125. app.list = getEmptyPaginateObj();
  126. app.mescroll.resetUpScroll();
  127. },
  128. // 跳转文章详情页
  129. onTargetDetail(articleId) {
  130. this.$navTo('pages/article/detail', { articleId });
  131. }
  132. },
  133. /**
  134. * 分享当前页面
  135. */
  136. onShareAppMessage() {
  137. return {
  138. title: '文章首页',
  139. path: "/pages/article/index?" + this.$getShareUrlParams()
  140. }
  141. },
  142. /**
  143. * 分享到朋友圈
  144. * 本接口为 Beta 版本,暂只在 Android 平台支持,详见分享到朋友圈 (Beta)
  145. * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
  146. */
  147. onShareTimeline() {
  148. return {
  149. title: '文章首页',
  150. path: "/pages/article/index?" + this.$getShareUrlParams()
  151. }
  152. }
  153. }
  154. </script>
  155. <style lang="scss" scoped>
  156. /* 顶部选项卡 */
  157. .container {
  158. min-height: 100vh;
  159. }
  160. .tabs-wrapper {
  161. position: sticky;
  162. top: var(--window-top);
  163. display: flex;
  164. width: 100%;
  165. height: 88rpx;
  166. color: #333;
  167. font-size: 28rpx;
  168. background: #fff;
  169. border-bottom: 1rpx solid #e4e4e4;
  170. z-index: 100;
  171. overflow: hidden;
  172. white-space: nowrap;
  173. }
  174. .tab-item {
  175. display: inline-block;
  176. padding: 0 15rpx;
  177. text-align: center;
  178. min-width: 20%;
  179. height: 87rpx;
  180. line-height: 88rpx;
  181. box-sizing: border-box;
  182. .value {
  183. height: 100%;
  184. }
  185. &.active .value {
  186. color: #fd4a5f;
  187. border-bottom: 4rpx solid #fd4a5f;
  188. }
  189. }
  190. /* 文章列表 */
  191. .article-list {
  192. padding-top: 20rpx;
  193. line-height: 1;
  194. background: #f7f7f7;
  195. }
  196. .article-item {
  197. margin-bottom: 20rpx;
  198. padding: 30rpx;
  199. background: #fff;
  200. &:last-child {
  201. margin-bottom: 0;
  202. }
  203. .article-item-title {
  204. max-height: 80rpx;
  205. font-size: 32rpx;
  206. color: #333;
  207. }
  208. .article-item-image .image {
  209. display: block;
  210. border-radius: 8rpx;
  211. height: 140rpx;
  212. width: 180rpx;
  213. border: 2rpx solid #cccccc;
  214. }
  215. }
  216. .show-type {
  217. display: flex;
  218. .article-item-left {
  219. padding-right: 20rpx;
  220. }
  221. .article-item-title {
  222. min-height: 72rpx;
  223. }
  224. }
  225. </style>