小程序源码

source/wx/xzs-student/component/iView/tab-bar/index.js

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

source/wx/xzs-student/component/iView/tab-bar/index.json

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

source/wx/xzs-student/component/iView/tab-bar/index.wxml

@@ -0,0 +1,6 @@
+<view class="i-class i-tab-bar {{ fixed ? 'i-tab-bar-fixed' : '' }}">
+    <slot></slot>
+    <view class="i-tab-bar-list">
+        <view class="i-tab-bar-layer" wx:for="{{ list }}" wx:key="{{ item.key }}" data-key="{{ item.key }}" bindtap="handleClickItem" style="width: {{ 100 / list.length }}%"></view>
+    </view>
+</view>

source/wx/xzs-student/component/iView/tab-bar/index.wxss

@@ -0,0 +1 @@
+.i-tab-bar{display:flex;width:100%;height:50px;box-sizing:border-box;position:relative;justify-content:space-around;align-items:center;-webkit-box-align:center;background:#fff}.i-tab-bar::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-top-width:1px}.i-tab-bar-fixed{position:fixed;bottom:0;z-index:2}.i-tab-bar-list{position:absolute;top:0;bottom:0;left:0;right:0}.i-tab-bar-layer{display:block;float:left;height:100%}