index.vue 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. <template>
  2. <view class="pages-content">
  3. <view class="tabs">
  4. <u-tabs-swiper ref="uTabs" :list="list" :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 list" :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. list: [{
  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. };
  35. },
  36. methods: {
  37. // tabs通知swiper切换
  38. tabsChange(index) {
  39. this.swiperCurrent = index;
  40. },
  41. // swiper-item左右移动,通知tabs的滑块跟随移动
  42. transition(e) {
  43. let dx = e.detail.dx;
  44. this.$refs.uTabs.setDx(dx);
  45. },
  46. // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
  47. // swiper滑动结束,分别设置tabs和swiper的状态
  48. animationfinish(e) {
  49. let current = e.detail.current;
  50. this.$refs.uTabs.setFinishCurrent(current);
  51. this.swiperCurrent = current;
  52. this.current = current;
  53. },
  54. // scroll-view到底部加载更多
  55. onreachBottom() {
  56. }
  57. }
  58. };
  59. </script>
  60. <style lang="scss">
  61. page{
  62. height: 100%;
  63. }
  64. .pages-content{
  65. width: 100%;
  66. height: 100%;
  67. display: flex;
  68. flex-direction: column;
  69. uni-swiper{
  70. flex-grow: 1;
  71. }
  72. }
  73. </style>