[新增]新增自定义tabbar组件

components/storeTabBar/storeTabBar.js

@@ -0,0 +1,56 @@
+/**
+ *  Web唐明明
+ *  匆匆数载恍如梦，岁月迢迢华发增。
+ *  碌碌无为枉半生，一朝惊醒万事空。
+ */
+
+import { tabBar } from "../../lib/storeConfig"
+
+Component({
+    /**
+     * 组件接收参数
+     */
+    properties: {
+        // 显示组件页面的路径
+        pagesUrl : {
+            type    : String,
+            value   : ""
+        }
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        selected        : 0,
+        color           : "#4e4f51",
+        selectedColor   : "#0b0041",
+        list            : []
+    },
+
+    /**
+     * 生命周期函数
+     */
+    pageLifetimes: {
+        show(){
+            let selectedIndex = tabBar.findIndex(val=> val.pagePath == '/' + this.data.pagesUrl)
+            this.setData({
+                list    : tabBar,
+                selected: selectedIndex
+            })
+        }
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        switchTab(e) {
+            const data = e.currentTarget.dataset
+            const url = data.path
+            wx.reLaunch({
+                url
+            })
+        }
+    }
+})

components/storeTabBar/storeTabBar.json

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

components/storeTabBar/storeTabBar.wxml

@@ -0,0 +1,8 @@
+<cover-view class="tab-bar">
+    <cover-view class="tab-bar-border"></cover-view>
+    <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}"
+        data-index="{{index}}" bindtap="switchTab">
+        <cover-image class="tab-bar-item-icon" src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
+        <cover-view class="tab-bar-text" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
+    </cover-view>
+</cover-view>

components/storeTabBar/storeTabBar.wxss

@@ -0,0 +1,44 @@
+
+/**
+ *  Web唐明明
+ *  匆匆数载恍如梦，岁月迢迢华发增。
+ *  碌碌无为枉半生，一朝惊醒万事空。
+ */
+
+ .tab-bar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 48px;
+    background: white;
+    display: flex;
+    padding-bottom: env(safe-area-inset-bottom);
+}
+
+.tab-bar-border {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 1px;
+    transform: scaleY(0.5);
+}
+
+.tab-bar-item {
+    flex: 1;
+    text-align: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+}
+
+.tab-bar-item-icon{
+    width: 24px;
+    height: 24px;
+}
+
+.tab-bar-text{
+    font-size: 10px;
+}