zero.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <view class="content">
  3. <view class="navbar">
  4. <view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
  5. </view>
  6. <swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab" :style="{ height: maxheight + 'px' }">
  7. <swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
  8. <scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
  9. <!-- 空白页 -->
  10. <empty v-if="tabItem.orderList.length === 0"></empty>
  11. <!-- 订单列表 -->
  12. <view v-for="(ls, index) in tabItem.orderList"></view>
  13. <uni-load-more :status="tabItem.loadingType"></uni-load-more>
  14. </scroll-view>
  15. </swiper-item>
  16. </swiper>
  17. </view>
  18. </template>
  19. <script>
  20. import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
  21. import empty from '@/components/empty';
  22. export default {
  23. components: {
  24. empty,
  25. uniLoadMore
  26. },
  27. // 计算剩余高度
  28. onReady(res) {
  29. var _this = this;
  30. uni.getSystemInfo({
  31. success: resu => {
  32. const query = uni.createSelectorQuery();
  33. query.select('.swiper-box').boundingClientRect();
  34. query.exec(function(res) {
  35. console.log(res, 'ddddddddddddd');
  36. _this.maxheight = resu.windowHeight - res[0].top + 'px';
  37. console.log('打印页面的剩余高度', _this.maxheight);
  38. });
  39. },
  40. fail: res => {}
  41. });
  42. },
  43. data() {
  44. return {
  45. // 头部图高度
  46. maxheight: '',
  47. tabCurrentIndex: 0,
  48. navList: [
  49. {
  50. text: '首页',
  51. loadingType: 'more',
  52. orderList: [],
  53. page: 1, //当前页数
  54. limit: 10 //每次信息条数
  55. },
  56. {
  57. text: '我的抢购',
  58. loadingType: 'more',
  59. orderList: [],
  60. page: 1, //当前页数
  61. limit: 10 //每次信息条数
  62. }
  63. ]
  64. };
  65. },
  66. methods: {
  67. tabClick(index) {
  68. this.tabCurrentIndex = index;
  69. }
  70. }
  71. };
  72. </script>
  73. <style lang="less">
  74. .content,page {
  75. }
  76. .navbar {
  77. display: flex;
  78. height: 40px;
  79. padding: 0 5px;
  80. background: #fff;
  81. box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
  82. position: relative;
  83. z-index: 10;
  84. .nav-item {
  85. flex: 1;
  86. display: flex;
  87. justify-content: center;
  88. align-items: center;
  89. height: 100%;
  90. font-size: 15px;
  91. color: #999999;
  92. position: relative;
  93. &.current {
  94. color: #dc262b;
  95. &:after {
  96. content: '';
  97. position: absolute;
  98. left: 50%;
  99. bottom: 0;
  100. transform: translateX(-50%);
  101. width: 44px;
  102. height: 0;
  103. border-bottom: 2px solid #dc262b;
  104. }
  105. }
  106. }
  107. }
  108. .swiper-box {
  109. .order-item {
  110. padding: 20rpx 30rpx;
  111. line-height: 1.5;
  112. }
  113. }
  114. </style>