└── components
    └── simple-tab
        └── aloys-tab.vue


/components/simple-tab/aloys-tab.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <view style="width: 100%; height: 100%;">
 3 |     <view class="tabs">
 4 |       <view v-for="(tab, index) in tabs" class="tab-item" :class="current==index&&'active'" @click="current = index">
 5 |       {{tab.title}}
 6 |       </view>
 7 |     </view>
 8 |     <swiper :current="current" class="swiper-box" @change="onChange">
 9 |         <swiper-item v-for="(item ,index) in tabs" :key="index">
10 |           <scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="scrolltolower">
11 |             <!-- #ifdef MP -->
12 |             <slot name="{{'content' + index}}"></slot>    
13 |             <!-- #endif -->
14 |             <!-- #ifndef MP -->
15 |             <slot :name="'content'+index"></slot>
16 |             <!-- #endif -->
17 |           </scroll-view>
18 |         </swiper-item>
19 |     </swiper>
20 |   </view>
21 | </template>
22 | 
23 | <script>
24 | 	export default {
25 |     name: 'swiperTab',
26 |     props: {
27 |       currentTab: {
28 |         type: Number,
29 |         default: 0
30 |       },
31 |       tabs: {
32 |         type: Array,
33 |         default: []
34 |       }
35 |     },
36 | 		data() {
37 | 			return {
38 | 				current: this.currentTab
39 | 			};
40 | 		},
41 |     methods: {
42 |       onChange(e) {
43 |         this.current = e.detail.current;
44 |         this.$emit('change', e.detail.current);
45 |       },
46 |       scrolltolower(e) {
47 |         this.$emit('onReachBottom', this.current);
48 |         console.log(this.current)
49 |       }
50 |     }
51 | 	}
52 | </script>
53 | <style>
54 | swiper-tab{
55 |   display: block;
56 |   height: 100%;
57 | }
58 | </style>
59 | <style lang="scss" scoped>
60 | .tabs{
61 |   width: 750rpx;
62 |   height: 75rpx;
63 |   display: flex;
64 |   .tab-item {
65 |     flex: 1;
66 |     text-align: center;
67 |     color: grey;
68 |     line-height: 73rpx;
69 |     font-size: 32rpx;
70 |     font-weight: 500;
71 |     height: 100%;
72 |     box-sizing: border-box;
73 |     &.active{
74 |       color: $uni-color-primary;
75 |       border-bottom: 2rpx solid $uni-color-primary;
76 |     }
77 |   }
78 | }
79 | .swiper-box{
80 |   width: 100%;
81 |   height: calc(100% - 75rpx);
82 |   overflow: auto;
83 | }
84 | </style>
85 | 


--------------------------------------------------------------------------------