From a0bf9f2746cc0cb97281e01bbea1d31a6985a677 Mon Sep 17 00:00:00 2001
From: gao1021514 <1328969651@qq.com>
Date: Fri, 8 Jul 2022 20:55:31 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9B=E4=BD=9C=E8=80=85=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/wiszx-tabs/tabPane.vue         |  29 ++++
 components/wiszx-tabs/tabs.vue            | 159 ++++++++++++++++++++++
 components/wiszx-tabs/ʹ�÷���.md |  64 +++++++++
 3 files changed, 252 insertions(+)
 create mode 100644 components/wiszx-tabs/tabPane.vue
 create mode 100644 components/wiszx-tabs/tabs.vue
 create mode 100644 components/wiszx-tabs/ʹ�÷���.md

diff --git a/components/wiszx-tabs/tabPane.vue b/components/wiszx-tabs/tabPane.vue
new file mode 100644
index 0000000..874fd5d
--- /dev/null
+++ b/components/wiszx-tabs/tabPane.vue
@@ -0,0 +1,29 @@
+<template>
+    <view 
+        class='tab-pane-item'
+    >
+        <slot></slot>
+    </view>
+</template>
+<script>
+export default {
+    name:'TabPane',
+    props:{
+        current:{
+            default:0,
+            type:Number
+        }
+    }
+}
+</script>
+<style lang="stylus">
+.tab-pane-item
+    width: 100%;
+    height 100%
+    display: inline-block
+    white-space: initial;
+    vertical-align: top;
+    font-size: 24upx;
+    box-sizing: border-box;
+    overflow: auto
+</style>
diff --git a/components/wiszx-tabs/tabs.vue b/components/wiszx-tabs/tabs.vue
new file mode 100644
index 0000000..23e6091
--- /dev/null
+++ b/components/wiszx-tabs/tabs.vue
@@ -0,0 +1,159 @@
+
+<template>
+    <view 
+        class="tabs"
+    >
+        <scroll-view class="active-switch" scroll-x :scroll-into-view="id" scroll-with-animation>
+            <view class="switch-container" >
+                <view 
+                v-for="(item,index) in TabList" :key="index"
+                :class="['active-item',currentTab==index&&'focus',TabList.length==3&&'fix']"
+                @tap="tabChange(index)"
+                :id='`tab_${index}`'
+                >
+                    <view class="item">{{item.title}}</view>
+                </view>
+                <view class="focus-line"
+                    :class="[TabList.length==3&&'fix']"
+                    :style="{transform:transformX}"
+                >
+                </view>
+            </view>
+        </scroll-view>
+        <view class="tab-pane-view"
+            @touchstart='touchstart'
+            @touchend='touchend'
+        >
+            <view 
+              class="tab-pane-group"
+              :style="{transform:transformXx}"  
+            >
+            <slot></slot>
+            </view>
+        </view>
+    </view>    
+</template>
+<script>
+export default {
+    name:'Tabs',
+    data(){
+        return {
+            id:'tab_0',
+            start:0
+        }
+    },
+    props:{
+        TabList:{
+            default:()=>{
+                return []
+            },
+            type:Array
+        },
+        currentTab:{
+            default:0,
+            type:Number
+        }
+    },
+    computed:{
+        transformX(){
+            let currentTab = this.currentTab;
+            return `translate3d(${currentTab*100}%, 0px, 0px)`
+        },
+        transformXx(){
+            let currentTab = this.currentTab;
+            return `translate3d(-${currentTab*100}%, 0px, 0px)`
+        }
+    },
+    methods:{
+        tabChange(index){
+            if(this.currentTab!=index){
+                console.log(`emit:${index}`);
+                this.$emit('tabs',index);
+                this.bus.$emit('tabs',index)  //事件，这里触发tabs事件
+                this.id = `tab_${index}`
+            }
+        },
+        touchstart(e){
+            this.start = e.touches[0].clientX;
+        },
+        touchend(e){
+            let end = e.changedTouches[0].clientX;
+            if(end-this.start>100&&this.currentTab>=1){
+                this.tabChange(this.currentTab-1)
+            }else if(this.start-end>100&&this.currentTab<this.TabList.length-1){
+                this.tabChange(this.currentTab+1)
+            }
+        }
+    }
+}
+</script>
+<style lang="stylus">
+.tabs
+    position relative
+    height 100vh
+    display flex
+    flex-direction column
+    .active-switch
+        overflow scroll
+        .switch-container
+            position relative
+            display flex
+            flex-direction row
+            .focus-line
+                flex 1
+                width 160upx
+                position absolute
+                bottom 0
+                border-bottom 4upx solid #f07
+                transition 0.3s
+                &.fix
+                    width 250upx
+        .active-item
+            position relative
+            min-width 160upx
+            width 160upx
+            flex 1
+            height 100upx
+            transition .3s
+            background-color: #fff
+            color #000
+            text-align: center
+            display: flex 
+            flex-direction: column
+            justify-content: space-around
+            border-bottom 1upx solid rgba(0,0,0,0.5)
+            &.focus
+                background #fff
+                color #f07
+                transition-duration: .3s
+            &.fix
+                width 250upx
+            .item
+                // width: 220upx
+                padding: 0 5upx
+                overflow hidden
+                font-size: 28upx
+    .tab-pane-view
+        overflow hidden
+        background-color: #f7f7f7
+        flex 1
+        .tab-pane-group
+            display: block;
+            white-space: nowrap;
+            -webkit-transition: all .3s;
+            transition: all .3s;
+            width: 100%;
+            overflow: visible;
+            will-change: transform,left,top;
+            min-height 100upx
+            height 100%
+            .tab-pane-item
+                width: 100%;
+                min-height 100upx
+                display: inline-block
+                white-space: initial;
+                vertical-align: top;
+                font-size: 24upx;
+                box-sizing: border-box;
+                overflow: auto
+</style>
diff --git a/components/wiszx-tabs/ʹ�÷���.md b/components/wiszx-tabs/ʹ�÷���.md
new file mode 100644
index 0000000..d1bb0f9
--- /dev/null
+++ b/components/wiszx-tabs/ʹ�÷���.md
@@ -0,0 +1,64 @@
+```html
+
+<template>
+    <Tabs
+        :TabList="TabList"
+        :currentTab="current"
+        @tabs="tabsChange"
+    >
+        <TabPane>
+            <view>1</view>
+        </TabPane>
+        <TabPane>
+            <view>2</view>
+        </TabPane>
+        <TabPane>
+            <view>3</view>
+        </TabPane>
+    </Tabs>
+</template>   
+<script>  
+/**
+ * 使用stylus预处理器，可能需要自己添加一下
+ * 引入tabs 和tabPane组件  
+    为tabs 传入 
+    tablist（tab标题），
+    currentTab（选中的tab）， 
+    @tabs事件  改变选中的tabs
+    TabList:[
+        {title:'商品介绍'},
+        {title:'规格参数'},
+        {title:'售后保障'}
+    ]  
+    TabPane 根据 tab的多少添加。  
+    更新：  
+        在tabPane区域添加了滑动手指事件。横向滑动切换tab。  
+        在tabs.vue中的  tabChange方法中发布了全局事件，不需要可以注释掉。这里主要方便tabpane中的内容监听 tabs的切换做出响应。  
+*/
+import Tabs from './components/tabs/tabs.vue'
+import TabPane from './components/tabs/tabPane.vue'
+
+export default {
+    data(){
+        return{
+            current:0,
+            TabList:[
+                {title:'商品介绍'},
+                {title:'规格参数'},
+                {title:'售后保障'}
+            ]
+        }
+    },
+    methods:{
+        tabsChange(index){
+            this.current = index
+        }
+    },
+    components:{
+        Tabs,
+        TabPane
+    }
+}
+</script>
+
+```
\ No newline at end of file