Articlelist.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <template><page-meta :root-font-size="fontSize+'px'"></page-meta>
  2. <home-base :show="false"><view style="position: absolute;top:0;right:0;left:0;bottom:0" class="scroll-view-wrapper div container">
  3. <view class="div common-header-wrap">
  4. <view class="status-holder"></view>
  5. <view :style="'height:'+navHeight+'px'"></view>
  6. <view class="common-header-holder"></view>
  7. <view class="common-header-fixed">
  8. <title-header />
  9. <uni-nav-bar :title="article_type_name" class="common-header" left-icon="back" @clickLeft="goBack()">
  10. </uni-nav-bar>
  11. </view>
  12. </view>
  13. <view class="scroll-view div" style="position:relative">
  14. <scroll-view style="position: absolute;top:0;right:0;left:0;bottom:0" class="div flex-wrapper" @scrolltolower="loadMore" scroll-y="true">
  15. <view v-for='item in articleList' v-bind:key='item.article_id' @click="goArticleDetail(item)" class="div article-class">
  16. <flex-line :is-link="true" :show-border="true"><text class="span">{{item.article_title}}</text></flex-line>
  17. </view>
  18. <empty-record v-if='articleList.length <= 0 && !isMore'></empty-record>
  19. </scroll-view>
  20. </view>
  21. </view></home-base>
  22. </template>
  23. <script>
  24. import {getFontSize} from '@/util/common'
  25. import TitleHeader from '../../TitleHeader'
  26. import { urlencode } from '@/util/common'
  27. import HomeBase from '../HomeBase'
  28. import EmptyRecord from '../../EmptyRecord'
  29. import { getArticleList } from '../../../api/homeArticle'
  30. import flexLine from '../../flexLine'
  31. export default {
  32. name: 'ArticleList',
  33. components:{
  34. TitleHeader,
  35. HomeBase,
  36. flexLine,
  37. EmptyRecord
  38. },
  39. mounted(){
  40. // #ifdef MP-WEIXIN
  41. this.navHeight = uni.getMenuButtonBoundingClientRect().top
  42. // #endif
  43. },
  44. computed:{
  45. fontSize(){
  46. return getFontSize()
  47. },
  48. },
  49. data(){
  50. return {
  51. navHeight: 0,
  52. article_type_name: '',
  53. ac_id: '', // 文章分类ID
  54. articleList: [],
  55. params: { 'page': 0, 'per_page': 10 },
  56. loading: false, // 是否加载更多
  57. isMore: true // 是否有更多
  58. }
  59. },
  60. onLoad: function (option) {
  61. this.ac_id=option.ac_id ? option.ac_id : ''
  62. this.loadMore()
  63. },
  64. methods:{
  65. goBack(){uni.navigateBack({delta:1})},
  66. loadMore () {
  67. if(this.loading){
  68. return
  69. }
  70. this.loading = true
  71. this.params.page = ++this.params.page
  72. if (this.isMore) {
  73. this.getArticleList(true)
  74. }
  75. },
  76. getArticleList () {
  77. uni.showLoading({ title: '加载中' })
  78. getArticleList(this.params, this.ac_id).then(res => {
  79. uni.hideLoading()
  80. if (res.result.hasmore) {
  81. this.isMore = true
  82. } else {
  83. this.isMore = false
  84. }
  85. if (this.articleList) {
  86. this.articleList = this.articleList.concat(res.result.article_list)
  87. } else {
  88. this.articleList = res.result.article_list
  89. }
  90. this.article_type_name = res.result.article_type_name
  91. this.loading = false
  92. }).catch(error=> {
  93. uni.hideLoading()
  94. uni.showToast({icon:'none',title: error.message})
  95. this.loading = false
  96. })
  97. },
  98. goArticleDetail (item) {
  99. uni.navigateTo({ url: '/pages/home/article/Articledetail'+'?'+urlencode( { 'article_id': item.article_id } )})
  100. }
  101. }
  102. }
  103. </script>
  104. <style scoped lang="scss">
  105. .scroll-view-wrapper{display: flex;flex-direction: column;}
  106. .scroll-view{flex:1}
  107. .article-class{padding:0 $pageSpace;background: #fff}
  108. </style>