小程序源码

source/wx/xzs-student/component/iView/tabs/index.js

@@ -0,0 +1,56 @@
+Component({
+    externalClasses: ['i-class'],
+
+    relations: {
+        '../tab/index': {
+            type: 'child',
+            linked () {
+                this.changeCurrent();
+            },
+            linkChanged () {
+                this.changeCurrent();
+            },
+            unlinked () {
+                this.changeCurrent();
+            }
+        }
+    },
+
+    properties: {
+        current: {
+            type: String,
+            value: '',
+            observer: 'changeCurrent'
+        },
+        color: {
+            type: String,
+            value: ''
+        },
+        scroll: {
+            type: Boolean,
+            value: false
+        },
+        fixed: {
+            type: Boolean,
+            value: false
+        }
+    },
+
+    methods: {
+        changeCurrent (val = this.data.current) {
+            let items = this.getRelationNodes('../tab/index');
+            const len = items.length;
+
+            if (len > 0) {
+                items.forEach(item => {
+                    item.changeScroll(this.data.scroll);
+                    item.changeCurrent(item.data.key === val);
+                    item.changeCurrentColor(this.data.color);
+                });
+            }
+        },
+        emitEvent (key) {
+            this.triggerEvent('change', { key });
+        }
+    }
+});

source/wx/xzs-student/component/iView/tabs/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

source/wx/xzs-student/component/iView/tabs/index.wxml

@@ -0,0 +1,2 @@
+<scroll-view wx:if="{{ scroll }}" scroll-x="true" class="i-class i-tabs i-tabs-scroll {{ fixed ? 'i-tabs-fixed' : '' }}"><slot></slot></scroll-view>
+<view wx:else class="i-class i-tabs {{ fixed ? 'i-tabs-fixed' : '' }}"><slot></slot></view>

source/wx/xzs-student/component/iView/tabs/index.wxss

@@ -0,0 +1 @@
+.i-tabs{display:flex;width:100%;height:42px;line-height:42px;box-sizing:border-box;position:relative;justify-content:space-around;align-items:center;-webkit-box-align:center;background:#fff}.i-tabs::after{content:'';position:absolute;top:0;left:0;width:200%;height:200%;transform:scale(.5);transform-origin:0 0;pointer-events:none;box-sizing:border-box;border:0 solid #e9eaec;border-bottom-width:1px}.i-tabs-scroll{display:block;overflow-x:auto;white-space:nowrap}.i-tabs-fixed{position:fixed;top:0;z-index:2}