仿互站小程序

vant/tabbar-item/index.js

@@ -0,0 +1,29 @@
+(0, require("../common/component").VantComponent)({
+    props: {
+        info: null,
+        icon: String,
+        dot: Boolean
+    },
+    relation: {
+        name: "tabbar",
+        type: "ancestor",
+        linked: function(t) {
+            this.parent = t;
+        }
+    },
+    data: {
+        active: !1
+    },
+    methods: {
+        onClick: function() {
+            this.parent && this.parent.onChange(this), this.$emit("click");
+        },
+        setActive: function(t) {
+            var e = t.active, n = t.color;
+            return this.data.active !== e ? this.set({
+                active: e,
+                color: n
+            }) : Promise.resolve();
+        }
+    }
+});

vant/tabbar-item/index.json

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

vant/tabbar-item/index.wxml

@@ -0,0 +1,14 @@
+<view bind:tap="onClick" class="{{utils.bem( 'tabbar-item',{active:active} )}} custom-class" style="{{active&&color?'color: '+color:''}}">
+    <view class="{{utils.bem( 'tabbar-item__icon',{dot:dot} )}}">
+        <van-icon customStyle="display: block" name="{{icon}}" wx:if="{{icon}}"></van-icon>
+        <block wx:else>
+            <slot name="icon-active" wx:if="{{active}}"></slot>
+            <slot name="icon" wx:else></slot>
+        </block>
+        <van-info customStyle="margin-top: 2px" info="{{info}}" wx:if="{{info!==null}}"></van-info>
+    </view>
+    <view class="van-tabbar-item__text">
+        <slot></slot>
+    </view>
+</view>
+<wxs module="utils" src="../wxs/utils.wxs" />

vant/tabbar-item/index.wxss

@@ -0,0 +1,39 @@
+@import "../area/index.wxss";
+
+.van-tabbar-item {
+    color: #7d7e80;
+    height: 100%;
+    display: flex;
+    line-height: 1;
+    font-size: 12px;
+    align-items: center;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.van-tabbar-item__icon {
+    font-size: 18px;
+    margin-bottom: 5px;
+    position: relative;
+}
+
+.van-tabbar-item__icon--dot:after {
+    top: 0;
+    right: -8px;
+    width: 8px;
+    height: 8px;
+    content: " ";
+    position: absolute;
+    border-radius: 100%;
+    background-color: #f44;
+}
+
+.van-tabbar-item__icon image {
+    width: 30px;
+    height: 18px;
+    display: block;
+}
+
+.van-tabbar-item--active {
+    color: #1989fa;
+}