list.vue 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980
  1. <template>
  2. <view>
  3. <view class="list">
  4. <view class="news_item" v-for="(item, index) in list" :key="index" @click="detail(item)">
  5. <image src="../../static/news.jpg" mode="aspectFill" class="img"></image>
  6. <view class="con">
  7. <view class="title ellip">广西边境口岸城市年中经济新观察边贸旺 旅游热 产业稳广西边境口岸城市年中经济新观察边贸旺 旅游热 产业稳</view>
  8. <view class="date">
  9. <text class="icon">&#xe65c;</text>
  10. <text>{{ item.readCount }}</text>
  11. </view>
  12. <text class="releaseTime">{{ item.releaseTime }}</text>
  13. </view>
  14. <view class="clear"></view>
  15. </view>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. export default {
  21. data() {
  22. return {
  23. list: [],
  24. param: { pageNum: 1, pageSize: 10, orderByColumn: 'createTime', isAsc: 'desc' },
  25. loadMore: true
  26. };
  27. },
  28. onLoad(e) {
  29. this.getData();
  30. },
  31. methods: {
  32. getData() {
  33. this.http.request({
  34. url: '/level-one-server/app/TbPortNews/getPortNewsList',
  35. data: this.param,
  36. loading: 'false',
  37. success: res => {
  38. this.list.push(...res.data.data);
  39. }
  40. });
  41. },
  42. detail(item) {
  43. uni.navigateTo({
  44. url: '/pages/news/detail?id=' + item.id
  45. });
  46. },
  47. //刷新数据
  48. refresh() {
  49. this.loadMore = true;
  50. this.param.pageNum = 1;
  51. this.list = [];
  52. this.getData();
  53. }
  54. },
  55. //下拉刷新
  56. onPullDownRefresh() {
  57. setTimeout(() => {
  58. this.refresh();
  59. uni.stopPullDownRefresh();
  60. }, 1000);
  61. },
  62. //上拉加载
  63. onReachBottom() {
  64. if (this.loadMore) {
  65. this.param.pageNum++;
  66. this.getData();
  67. }
  68. }
  69. };
  70. </script>
  71. <style lang="scss">
  72. page {
  73. background-color: #f5f5f5;
  74. }
  75. .list {
  76. padding: 12px;
  77. }
  78. </style>