仿互站小程序

vant/tabbar/index.js

@@ -0,0 +1,54 @@
+var e = require("../common/component"), t = require("../mixins/safe-area");
+
+(0, e.VantComponent)({
+    mixins: [ (0, t.safeArea)() ],
+    relation: {
+        name: "tabbar-item",
+        type: "descendant",
+        linked: function(e) {
+            this.children = this.children || [], this.children.push(e), this.setActiveItem();
+        },
+        unlinked: function(e) {
+            this.children = this.children || [], this.children = this.children.filter(function(t) {
+                return t !== e;
+            }), this.setActiveItem();
+        }
+    },
+    props: {
+        active: Number,
+        activeColor: String,
+        fixed: {
+            type: Boolean,
+            value: !0
+        },
+        zIndex: {
+            type: Number,
+            value: 1
+        }
+    },
+    watch: {
+        active: function(e) {
+            this.currentActive = e, this.setActiveItem();
+        }
+    },
+    created: function() {
+        this.currentActive = this.data.active;
+    },
+    methods: {
+        setActiveItem: function() {
+            var e = this;
+            return Array.isArray(this.children) && this.children.length ? Promise.all(this.children.map(function(t, i) {
+                return t.setActive({
+                    active: i === e.currentActive,
+                    color: e.data.activeColor
+                });
+            })) : Promise.resolve();
+        },
+        onChange: function(e) {
+            var t = this, i = (this.children || []).indexOf(e);
+            i !== this.currentActive && -1 !== i && (this.currentActive = i, this.setActiveItem().then(function() {
+                t.$emit("change", i);
+            }));
+        }
+    }
+});

vant/tabbar/index.json

@@ -0,0 +1,13 @@
+{
+    "component": true,
+    "usingComponents": {
+        "forview": "/utils/forview/index",
+        "van-loading": "/vant/loading/index",
+        "van-dialog": "/vant/dialog/index",
+        "van-button": "/vant/button/index",
+        "van-icon": "/vant/icon/index",
+        "van-popup": "/vant/popup/index",
+        "van-tab": "/vant/tab/index",
+        "van-tabs": "/vant/tabs/index"
+    }
+}

vant/tabbar/index.wxml

@@ -0,0 +1,4 @@
+<view class="custom-class van-hairline--top-bottom {{utils.bem( 'tabbar',{fixed:fixed,safe:isIPhoneX&&safeAreaInsetBottom} )}}" style="{{zIndex?'z-index: '+zIndex:''}}">
+    <slot></slot>
+</view>
+<wxs module="utils" src="../wxs/utils.wxs" />

vant/tabbar/index.wxss

@@ -0,0 +1,18 @@
+@import "../area/index.wxss";
+
+.van-tabbar {
+    display: flex;
+    width: 100%;
+    height: 50px;
+    background-color: #fff;
+}
+
+.van-tabbar--fixed {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+}
+
+.van-tabbar--safe {
+    padding-bottom: 34px;
+}