todayPromotionList.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. <template>
  2. <view class="page">
  3. <!-- #ifdef H5-->
  4. <uni-nav-bar v-if="!$isWxBrowser()" :fixed="true" background-color="#FFE05C" :border="false" :statusBar="false" left-icon="left" title="今日推广" @clickLeft="back" />
  5. <!-- #endif -->
  6. <view :style="{height:height}" class="list">
  7. <mescroll-uni ref="mescrollRef" @init="mescrollInit" :height="height" :down="downOption" @down="downCallback"
  8. :up="upOption" @up="upCallback" @emptyclick="emptyClick">
  9. <view class="flex-row justify-between item" v-for="(item,index) in 10">
  10. <view class="flex-row avatar">
  11. <image :src="'/static/ud4.png'"></image>
  12. </view>
  13. <view class="flex-row justify-between userMsg">
  14. <view class="flex-col justify-around">
  15. <text class="name">张辉</text>
  16. </view>
  17. <view class="flex-col justify-around">
  18. <text class="time">2024-01-29 12:00:00</text>
  19. </view>
  20. </view>
  21. </view>
  22. </mescroll-uni>
  23. </view>
  24. <!--#ifdef H5-->
  25. <liu-drag-button v-if="$isWxBrowser()" @clickBtn="back">返回</liu-drag-button>
  26. <!--#endif-->
  27. </view>
  28. </template>
  29. <script>
  30. import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  31. import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js"
  32. export default {
  33. mixins: [MescrollMixin, MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
  34. components: {},
  35. data() {
  36. return {
  37. height:'',
  38. downOption: {
  39. auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
  40. },
  41. upOption: {
  42. auto: false, // 不自动加载
  43. // page: {
  44. // num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
  45. // size: 10 // 每页数据的数量
  46. // },
  47. noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
  48. empty: {
  49. icon: '',
  50. tip: '暂无内容', // 提示
  51. // btnText: '去看看'
  52. },
  53. textNoMore: '没有更多了'
  54. },
  55. list: [],
  56. }
  57. },
  58. onLoad(e) {
  59. let sysInfo = uni.getSystemInfoSync()
  60. this.height = sysInfo.windowHeight - 70 + 'px' //除标题栏栏外的屏幕可用高度
  61. },
  62. methods: {
  63. back() {
  64. let pages = getCurrentPages()
  65. if (pages.length > 1){
  66. uni.navigateBack({
  67. delta: 1,
  68. fail:err=>{
  69. console.log(err)
  70. }
  71. })
  72. }else {
  73. uni.switchTab({
  74. url: '/pages/my/my'
  75. });
  76. }
  77. },
  78. /*下拉刷新的回调 */
  79. downCallback() {
  80. // 这里加载你想下拉刷新的数据, 比如刷新轮播数据
  81. // loadSwiper();
  82. // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
  83. this.mescroll.resetUpScroll()
  84. },
  85. /*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
  86. upCallback(page) {
  87. let status = this.index
  88. if (this.index === 3){
  89. status = 4
  90. }
  91. //联网加载数据
  92. this.mescroll.endSuccess(10, false);
  93. // this.$api.service.performanceList({
  94. // pageNum: page.num,
  95. // pageSize: 10,
  96. // type:this.index
  97. // }).then((res) => {
  98. // //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
  99. // this.mescroll.endSuccess(res.data.data.records.length, res.data.data.records.length === 10);
  100. // //设置列表数据
  101. // if (page.num === 1) this.list = []; //如果是第一页需手动制空列表
  102. // res.data.data.records.forEach(i=>{
  103. // if (i.avatar){
  104. // i.avatar = i.avatar.replace(/^http:/, "https:")
  105. // }
  106. // })
  107. // this.list = this.list.concat(res.data.data.records); //追加新数据
  108. // console.log(this.list)
  109. // }).catch((err) => {
  110. // //联网失败, 结束加载
  111. // this.mescroll.endErr();
  112. // })
  113. },
  114. //点击空布局按钮的回调
  115. emptyClick() {
  116. uni.showToast({
  117. title: '点击了按钮,具体逻辑自行实现'
  118. })
  119. },
  120. }
  121. }
  122. </script>
  123. <style lang="scss" scoped>
  124. @import './index.rpx.css';
  125. </style>