index.vue 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. <!-- 货源 -->
  2. <template>
  3. <view class="content">
  4. <view class="head flex">
  5. <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
  6. </view>
  7. <me-tabs v-model="tabIndex" :tabs="tabs" class="m-topr20"></me-tabs>
  8. <swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
  9. <swiper-item v-for="(tab,i) in tabs" :key="i">
  10. <mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs" :height="height">
  11. </mescroll-item>
  12. </swiper-item>
  13. </swiper>
  14. </view>
  15. </template>
  16. <script>
  17. import MescrollItem from "./mescroll-swiper-item.vue";
  18. export default {
  19. components: {
  20. MescrollItem
  21. },
  22. data() {
  23. return {
  24. keyword:'',
  25. src: 'https://cdn.uviewui.com/uview/album/1.jpg',
  26. height: "", // 需要固定swiper的高度
  27. tabs: [{
  28. name: '全部'
  29. }, {
  30. name: '未发运'
  31. }, {
  32. name: '运输中'
  33. }, {
  34. name: '代收货'
  35. },
  36. {
  37. name: '评价'
  38. },
  39. {
  40. name: '待结算'
  41. },
  42. {
  43. name: '已完结'
  44. },
  45. ],
  46. tabIndex: 0 // 当前tab的下标
  47. }
  48. },
  49. onLoad() {
  50. let _isHave = this.$utils.getRoles('aaa')
  51. console.log(_isHave)
  52. // 需要固定swiper的高度 (需减去悬浮tabs的高度64rpx)
  53. this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(64) + 'px'
  54. },
  55. methods: {
  56. changeCity(type) {
  57. console.log(type)
  58. },
  59. swiperChange(e) {
  60. this.tabIndex = e.detail.current
  61. }
  62. }
  63. }
  64. </script>
  65. <style scoped lang="scss">
  66. </style>