index.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  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 :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></couponTpl>
  11. </scroll-view>
  12. </swiper-item>
  13. </swiper>
  14. </view>
  15. </template>
  16. <script>
  17. import couponTpl from '@/pages/coupon/couponTpl.vue'
  18. export default {
  19. components: {
  20. couponTpl
  21. },
  22. data() {
  23. return {
  24. tabsList: [{
  25. name: '未使用'
  26. }, {
  27. name: '已使用'
  28. }, {
  29. name: '已过期'
  30. }],
  31. // 因为内部的滑动机制限制,请将tabs组件和swiper组件的current用不同变量赋值
  32. current: 0, // tabs组件的current值,表示当前活动的tab选项
  33. swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的
  34. pageNo:1,
  35. pageSize:15,
  36. count:0
  37. };
  38. },
  39. methods: {
  40. // tabs通知swiper切换
  41. tabsChange(index) {
  42. this.swiperCurrent = index;
  43. },
  44. // swiper-item左右移动,通知tabs的滑块跟随移动
  45. transition(e) {
  46. let dx = e.detail.dx;
  47. this.$refs.uTabs.setDx(dx);
  48. },
  49. // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
  50. // swiper滑动结束,分别设置tabs和swiper的状态
  51. animationfinish(e) {
  52. let current = e.detail.current;
  53. this.$refs.uTabs.setFinishCurrent(current);
  54. this.swiperCurrent = current;
  55. this.current = current;
  56. },
  57. // scroll-view到底部加载更多
  58. onreachBottom() {
  59. },
  60. // 获取优惠卷列表
  61. getList(){
  62. }
  63. }
  64. };
  65. </script>
  66. <style lang="scss">
  67. page{
  68. height: 100%;
  69. }
  70. .pages-content{
  71. width: 100%;
  72. height: 100%;
  73. display: flex;
  74. flex-direction: column;
  75. uni-swiper{
  76. flex-grow: 1;
  77. }
  78. }
  79. </style>