list.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. <template>
  2. <view>
  3. <navbar v-model="screenHeight" :iSimmersive="false" :placeholder="true" title="资讯列表"></navbar>
  4. <mescroll-body
  5. ref="mescrollRef"
  6. @init="mescrollInit"
  7. @down="downCallback"
  8. @up="upCallback"
  9. :height="screenHeight+'px'"
  10. >
  11. <view class="news-list-box">
  12. <view class="news-wrap">
  13. <view
  14. v-for="(item,index) in result"
  15. :key="index"
  16. class="news-item-box clear"
  17. @click="$utils.navigateTo('news/view',{id: item.id})"
  18. >
  19. <view class="news-box">
  20. <text>{{item.title}}</text>
  21. <text>{{item.create_time}}</text>
  22. </view>
  23. <view class="pic">
  24. <image :src="item.photo">
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. </mescroll-body>
  30. </view>
  31. </template>
  32. <script>
  33. import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  34. import navbar from "@/components/navbar/navbar";
  35. export default {
  36. mixins: [MescrollMixin],
  37. components: {
  38. navbar
  39. },
  40. data() {
  41. return {
  42. screenHeight: 0,
  43. result: [],
  44. cat_id: 0
  45. }
  46. },
  47. onLoad(options) {
  48. this.cat_id = options.id;
  49. },
  50. methods: {
  51. downCallback(){
  52. setTimeout(()=>{
  53. this.mescroll.resetUpScroll();
  54. },200);
  55. },
  56. // 主动触发下拉刷新
  57. triggerDownScroll(){
  58. this.mescroll.triggerDownScroll();
  59. },
  60. upCallback(page) {
  61. this.$http.getNewsList({
  62. page: page.num,
  63. cat_id: this.cat_id
  64. }).then((result)=>{
  65. this.mescroll.endByPage(result.data.list.length, result.data.total);
  66. if(result.status==1){
  67. if(page.num == 1) this.result = [];
  68. this.result = this.result.concat(result.data.list);
  69. }else if(result.status == -1){
  70. this.mescroll.endErr();
  71. }
  72. }).catch(error=>{
  73. this.mescroll.endErr();
  74. });
  75. }
  76. }
  77. }
  78. </script>
  79. <style lang="scss" scoped>
  80. .news-list-box{
  81. width: 100%;display: flex; flex-direction: row;flex-wrap: wrap;
  82. .news-wrap{
  83. width: 95%;
  84. margin: 0 auto;
  85. position: relative;
  86. }
  87. .news-item-box{
  88. position: relative;
  89. border-radius: 20rpx;
  90. background-color: #fff;
  91. height: 210rpx;
  92. margin: 20rpx 0;
  93. .news-box{
  94. padding-right: 270rpx;
  95. position: relative;
  96. height: 210rpx;
  97. text:first-child{
  98. display: block;
  99. margin-left: 30rpx;
  100. line-height: 50rpx;
  101. padding-top: 10rpx;
  102. font-size: 28rpx;
  103. color: #666;
  104. display: -webkit-box;
  105. overflow: hidden;
  106. -webkit-line-clamp: 2;
  107. -webkit-box-orient: vertical;
  108. }
  109. text:last-child{
  110. width: 100%;
  111. position: absolute;
  112. bottom: 10rpx;
  113. left: 0;
  114. height: 30rpx;
  115. line-height: 30rpx;
  116. text-indent: 30rpx;
  117. font-size: 26rpx;
  118. color: #999;
  119. }
  120. }
  121. .pic {
  122. position: absolute;
  123. top: 16rpx;
  124. right: 20rpx;
  125. image {
  126. width: 180rpx;
  127. height: 180rpx;
  128. }
  129. }
  130. }
  131. }
  132. </style>