菜单组件

pages/welfareMall/components/tabbar.js

@@ -0,0 +1,74 @@
+// pages/luckDraw/components/tabbar.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        list: [
+            {
+                text: "首页",
+                pagePath: "/pages/welfareMall/index",
+                selectedIconPath: "../../../images/welfareMall/home-active.png",
+                iconPath: "../../../images/welfareMall/home.png",
+            },
+            {
+                text: "我的",
+                pagePath: "/pages/welfareMall/personal/personal",
+                selectedIconPath: "../../../images/welfareMall/user-active.png",
+                iconPath: "../../../images/welfareMall/user.png",
+            }
+        ]
+    },
+
+    attached: function() {
+        var url =getCurrentPages()[getCurrentPages().length-1].route
+        this.data.list.forEach(v => {
+            if (this.getPathName(v.pagePath) == this.getPathName(url)) {
+                v.active = true
+            }
+        })
+        this.setData({
+            list: this.data.list
+        })
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        toPage: function(e) {
+            const index = e.currentTarget.dataset.index;
+            this.data.list.forEach((v, i) => {
+                if (i == index) {
+                    v.active = true
+                } else {
+                    v.active = false
+                }
+            })
+            this.setData({
+                list: this.data.list
+            })
+            if (index == 0) {
+                wx.reLaunch({
+                  url: this.data.list[index].pagePath,
+                })
+                return
+            }
+            wx.redirectTo({
+              url: this.data.list[index].pagePath,
+            })
+        },
+        getPathName(path) {
+            let pos = path.indexOf("luckDraw/");
+            pos += "luckDraw/".length;
+            return path.substr(pos)
+        }
+    }
+})

pages/welfareMall/components/tabbar.json

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

pages/welfareMall/components/tabbar.wxml

@@ -0,0 +1,11 @@
+<!--pages/luckDraw/components/tabbar.wxml-->
+<view class="tab-bar-body">
+    <view wx:for="{{list}}" wx:key="index" data-index="{{index}}" catchtap="toPage" class="{{item.active?'_active':''}}">
+       <view class="_ico">
+          <image class="_image" src="{{item.active ? item.selectedIconPath : item.iconPath}}" />
+       </view>
+       <view class="_text">
+          <text>{{item.text}}</text>
+       </view>
+    </view>
+</view>

pages/welfareMall/components/tabbar.wxss

@@ -0,0 +1,28 @@
+/* pages/luckDraw/components/tabbar.wxss */
+.tab-bar-body{
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    bottom: 0;
+    height: 98rpx;
+    background: #fff;
+    width: 100vw;
+    box-shadow: 0 8px 49px 0 rgba(179, 117, 117, 0.22);
+    display: flex;
+    justify-content: space-around;
+}
+.tab-bar-body ._ico {
+    height: 60rpx;
+    width: 60rpx;
+    padding-top: 4rpx;
+}
+.tab-bar-body ._image {
+    width: 100%;
+    height: 100%;
+}
+.tab-bar-body ._text {
+    line-height: 28rpx;
+    height: 28px;
+    text-align: center;
+    font-size: 28rpx;
+}

pages/welfareMall/personal/personal.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "tab-bar": "../components/tabbar"
+  }
 }