index.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. <template>
  2. <view class="pages-content">
  3. <view class="tabs">
  4. <u-tabs-swiper ref="uTabs" :list="tabsList" bar-width="100" :current="current" @change="tabsChange" :is-scroll="false"
  5. swiperWidth="750"></u-tabs-swiper>
  6. </view>
  7. <swiper style="height: calc(100% - 40px);" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
  8. <swiper-item class="swiper-item" v-for="(item, index) in tabsList" :key="index">
  9. <scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
  10. <couponTpl :list="couponList"></couponTpl>
  11. <u-empty :text="noDataText" img-width="120" v-if="couponList.length==0 && status!='loading'" mode="list"></u-empty>
  12. <view style="padding: 20upx;">
  13. <u-loadmore v-if="total>pageSize || status=='loading'" :status="status" />
  14. </view>
  15. </scroll-view>
  16. </swiper-item>
  17. </swiper>
  18. </view>
  19. </template>
  20. <script>
  21. import couponTpl from '@/pages/coupon/couponTpl.vue'
  22. export default {
  23. components: {
  24. couponTpl
  25. },
  26. data() {
  27. return {
  28. noDataText: '暂无数据',
  29. status: 'loadmore',
  30. tabsList: [{
  31. name: '未使用'
  32. }, {
  33. name: '已使用'
  34. }, {
  35. name: '已过期'
  36. }],
  37. couponList: [{
  38. id: 23432445,
  39. name: "满100减50",
  40. price: 100,
  41. yxTime: "2020-05-16",
  42. remarks: '优惠卷使用说明优惠卷使用说明优惠卷使用说明',
  43. checked: false
  44. },
  45. {
  46. id: 3544355,
  47. name: "满100减50",
  48. price: 100,
  49. yxTime: "2020-05-16",
  50. remarks: '优惠卷使用说明优惠卷使用说明优惠卷使用说明',
  51. checked: false
  52. },
  53. {
  54. id: 234234234,
  55. name: "满100减50",
  56. price: 100,
  57. yxTime: "2020-05-16",
  58. remarks: '优惠卷使用说明优惠卷使用说明优惠卷使用说明',
  59. checked: false
  60. },
  61. {
  62. id: 66264646,
  63. name: "满100减50",
  64. price: 100,
  65. yxTime: "2020-05-16",
  66. remarks: '优惠卷使用说明优惠卷使用说明优惠卷使用说明',
  67. checked: false
  68. },
  69. {
  70. id: 9794694698,
  71. name: "满100减50",
  72. price: 100,
  73. yxTime: "2020-05-16",
  74. remarks: '优惠卷使用说明优惠卷使用说明优惠卷使用说明',
  75. checked: false
  76. }
  77. ], // 优惠卷列表
  78. // 因为内部的滑动机制限制,请将tabs组件和swiper组件的current用不同变量赋值
  79. current: 0, // tabs组件的current值,表示当前活动的tab选项
  80. swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的
  81. pageNo:1,
  82. pageSize:15,
  83. count:0
  84. };
  85. },
  86. methods: {
  87. // tabs通知swiper切换
  88. tabsChange(index) {
  89. this.swiperCurrent = index;
  90. },
  91. // swiper-item左右移动,通知tabs的滑块跟随移动
  92. transition(e) {
  93. let dx = e.detail.dx;
  94. this.$refs.uTabs.setDx(dx);
  95. },
  96. // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
  97. // swiper滑动结束,分别设置tabs和swiper的状态
  98. animationfinish(e) {
  99. let current = e.detail.current;
  100. this.$refs.uTabs.setFinishCurrent(current);
  101. this.swiperCurrent = current;
  102. this.current = current;
  103. },
  104. // scroll-view到底部加载更多
  105. onreachBottom() {
  106. },
  107. // 获取优惠卷列表
  108. getList(){
  109. }
  110. }
  111. };
  112. </script>
  113. <style lang="scss">
  114. page{
  115. height: 100%;
  116. }
  117. .pages-content{
  118. width: 100%;
  119. height: 100%;
  120. display: flex;
  121. flex-direction: column;
  122. uni-swiper{
  123. flex-grow: 1;
  124. }
  125. }
  126. </style>