index.vue 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. <template>
  2. <view>
  3. <view class="flex-row justify-between" :style="{'height':height}">
  4. <view class="left-box flex-col">
  5. <scroll-view scroll-y :style="{'height':height}">
  6. <view class="flex-col">
  7. <view class="tab" :class="{'checked-tab':current===index}" v-for="(item,index) in productList" :key="index" @click="clickTab(index)">
  8. <text :class="{'unselected-text': current !== index,'checked-text': current !== index}">{{item.title}}</text>
  9. </view>
  10. </view>
  11. </scroll-view>
  12. </view>
  13. <view class="right-box flex-col">
  14. <swiper :style="{'height':height}" :current="current" duration="0">
  15. <swiper-item v-for="(tab,index) in productList" :key="index" :catchtouchmove="false">
  16. <view>
  17. <mescroll-item ref="MescrollItem" :i="index" :index="current" :productId="tab.id" :height="height">
  18. </mescroll-item>
  19. </view>
  20. </swiper-item>
  21. </swiper>
  22. </view>
  23. </view>
  24. </view>
  25. </template>
  26. <script>
  27. import MescrollItem from "./module/mescrollUni-item.vue";
  28. import { getCategoryOne, getCategoryTwo, getGoodsList } from '@/api/home.js'
  29. export default {
  30. components: {
  31. MescrollItem,
  32. },
  33. data () {
  34. return {
  35. vGoodsList:[],
  36. productList:[],
  37. current:0,
  38. height:'',
  39. }
  40. },
  41. created () {
  42. let sysInfo = uni.getSystemInfoSync();
  43. this.height = sysInfo.windowHeight*0.8+'px'
  44. console.log(this.height)
  45. this.getCategoryOne();
  46. },
  47. onShow(){
  48. },
  49. methods: {
  50. returnVGoods(){
  51. let arr=[];
  52. this.vGoodsList=[];
  53. for (let i =0;i<this.productList.length;i++){
  54. arr = this.$refs.MescrollItem[i].getvGoodsList();
  55. this.vGoodsList = this.vGoodsList.concat(arr)
  56. }
  57. return this.vGoodsList
  58. },
  59. clickTab(index){
  60. this.current =index
  61. },
  62. getCategoryOne () {
  63. getCategoryOne({
  64. parentId: 0
  65. }).then(res => {
  66. if (res.data.length > 0) {
  67. this.productList = res.data
  68. }
  69. })
  70. },
  71. }
  72. }
  73. </script>
  74. <style scoped lang="scss">
  75. @import '/static/css/common.css';
  76. @import './index.rpx.css';
  77. </style>