index.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  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. }
  45. },
  46. methods: {
  47. downCallback(){
  48. setTimeout(()=>{
  49. this.mescroll.resetUpScroll();
  50. },1200);
  51. },
  52. // 主动触发下拉刷新
  53. triggerDownScroll(){
  54. this.mescroll.triggerDownScroll();
  55. },
  56. upCallback(page) {
  57. this.$http.getNewsList({
  58. page: page.num,
  59. }).then((result)=>{
  60. this.mescroll.endByPage(result.data.list.length, result.data.total);
  61. if(result.status==1){
  62. if(page.num == 1) this.result = [];
  63. this.result = this.result.concat(result.data.list);
  64. }else if(result.status == -1){
  65. this.mescroll.endErr();
  66. }
  67. }).catch(error=>{
  68. this.mescroll.endErr();
  69. });
  70. }
  71. }
  72. }
  73. </script>
  74. <style lang="scss" scoped>
  75. .news-list-box{
  76. width: 100%;display: flex; flex-direction: row;flex-wrap: wrap;
  77. .news-wrap{
  78. width: 95%;
  79. margin: 0 auto;
  80. position: relative;
  81. }
  82. .news-item-box{
  83. position: relative;
  84. border-radius: 20rpx;
  85. background-color: #fff;
  86. height: 210rpx;
  87. margin: 20rpx 0;
  88. .news-box{
  89. padding-right: 270rpx;
  90. position: relative;
  91. height: 210rpx;
  92. text:first-child{
  93. display: block;
  94. margin-left: 30rpx;
  95. line-height: 50rpx;
  96. padding-top: 10rpx;
  97. font-size: 28rpx;
  98. color: #666;
  99. display: -webkit-box;
  100. overflow: hidden;
  101. -webkit-line-clamp: 2;
  102. -webkit-box-orient: vertical;
  103. }
  104. text:last-child{
  105. width: 100%;
  106. position: absolute;
  107. bottom: 10rpx;
  108. left: 0;
  109. height: 30rpx;
  110. line-height: 30rpx;
  111. text-indent: 30rpx;
  112. font-size: 26rpx;
  113. color: #999;
  114. }
  115. }
  116. .pic {
  117. position: absolute;
  118. top: 16rpx;
  119. right: 20rpx;
  120. image {
  121. width: 180rpx;
  122. height: 180rpx;
  123. }
  124. }
  125. }
  126. }
  127. </style>