myShopTour.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. <template>
  2. <view class="myShopTour-wrap">
  3. <!-- 自定义标题 -->
  4. <u-navbar :is-back="false" :border-bottom="false" :background="background" id="navbar">
  5. <view class="slot-wrap">
  6. <view class="back-icon" @click="goBack">
  7. <u-icon name="arrow-left" color="#fff" size="32"></u-icon>
  8. </view>
  9. <view class="left-icon">我的巡店</view>
  10. <view class="right-icon">
  11. <u-icon name="more-dot-fill" color="#fff" size="28"></u-icon>
  12. </view>
  13. </view>
  14. </u-navbar>
  15. <!-- 内容 -->
  16. <view class="myShopTour-con">
  17. <u-tabs-swiper ref="uTabs" :list="tabList" name="dispName" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
  18. <swiper class="data-list" :current="swiperCurrent" @transition="transition" @change="swiperChange" @animationfinish="animationfinish">
  19. <swiper-item class="swiper-item" v-for="(tabs, index) in tabList" :key="index">
  20. <scroll-view scroll-y class="scroll-con" @scrolltolower="onreachBottom">
  21. <view class="record-con">
  22. <view class="record-item">
  23. <view class="item-head"></view>
  24. </view>
  25. </view>
  26. <u-empty text="暂无数据" img-width="120" v-if="list.length == 0 && status != 'loading'" mode="list"></u-empty>
  27. <u-loadmore bg-color="#f8f8f8" v-if="list.length < total || status == 'loading'" :status="status" class="loadmore" />
  28. </scroll-view>
  29. </swiper-item>
  30. </swiper>
  31. </view>
  32. </view>
  33. </template>
  34. <script>
  35. export default {
  36. data() {
  37. return {
  38. background: {
  39. // 渐变色
  40. backgroundImage: 'linear-gradient(45deg, rgb(85, 170, 255), rgb(21, 102, 223))'
  41. },
  42. tabList: [ // tab切换 类型
  43. { dispName: '全部', code:'' },
  44. { dispName: '进行中', code:'1' },
  45. { dispName: '已完成', code:'2' },
  46. { dispName: '已过期', code:'3' }
  47. ],
  48. current: 0, // tabs组件的current值,表示当前活动的tab选项
  49. swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的
  50. pageNo: 1, // 当前页码
  51. pageSize: 15, // 一页多少条
  52. total: 0, // 总条数
  53. // status: 'loading', // 加载状态
  54. status: 'loadmore', // 加载状态
  55. noDataText: '暂无数据', // 列表数据为空时提示文字
  56. list: [], // 数据列表
  57. }
  58. },
  59. onLoad() {
  60. this.pageInit()
  61. },
  62. methods: {
  63. // 返回
  64. goBack() {
  65. uni.navigateBack({
  66. delta: 1
  67. });
  68. },
  69. pageInit(){
  70. this.total = 0
  71. this.pageNo = 1
  72. },
  73. // tabs通知swiper切换
  74. tabsChange(index) {
  75. this.swiperCurrent = index
  76. this.list = []
  77. this.status = "loading"
  78. },
  79. swiperChange(event){
  80. this.list = []
  81. this.status = "loading"
  82. },
  83. // swiper-item左右移动,通知tabs的滑块跟随移动
  84. transition(e) {
  85. let dx = e.detail.dx;
  86. this.$refs.uTabs.setDx(dx);
  87. },
  88. // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态
  89. // swiper滑动结束,分别设置tabs和swiper的状态
  90. animationfinish(e) {
  91. let current = e.detail.current
  92. if(current != this.current){
  93. this.$refs.uTabs.setFinishCurrent(current)
  94. this.swiperCurrent = current
  95. this.current = current
  96. this.pageInit()
  97. }
  98. },
  99. // scroll-view到底部加载更多
  100. onreachBottom() {
  101. if(this.list.length < this.total){
  102. this.pageNo += 1
  103. this.pageInit()
  104. }else{
  105. this.status = "nomore"
  106. }
  107. },
  108. }
  109. };
  110. </script>
  111. <style lang="scss" scoped>
  112. page {
  113. background-color: #f8f8f8;
  114. height: calc(100vh - 44px);
  115. }
  116. .myShopTour-wrap {
  117. height: 100%;
  118. /* 自定义导航栏样式 */
  119. .slot-wrap {
  120. display: flex;
  121. align-items: center;
  122. /* 如果您想让slot内容占满整个导航栏的宽度 */
  123. flex: 1;
  124. /* 如果您想让slot内容与导航栏左右有空隙 */
  125. padding: 0 30rpx;
  126. color: #fff;
  127. font-size: 28upx;
  128. .left-icon {
  129. flex-grow: 1;
  130. font-size: 32upx;
  131. margin-right: 10upx;
  132. text-align: center;
  133. }
  134. .right-icon {
  135. padding-left: 50upx;
  136. }
  137. .uni-icons {
  138. margin-right: 10upx;
  139. }
  140. }
  141. // 内容
  142. .myShopTour-con{
  143. .data-list{
  144. height: calc(100vh - 84px);
  145. .swiper-item{
  146. .scroll-con{
  147. height: 100%;
  148. .loadmore{
  149. padding: 30upx;
  150. }
  151. }
  152. }
  153. }
  154. }
  155. }
  156. </style>