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

components/mallIndex_list/mallIndex_list.wxml

@@ -7,7 +7,7 @@
         <view class="recommend-label" wx:for="{{pushList}}" wx:key="pushList" bindtap="push"
             data-id="{{item.goods_id}}">
             <view class="recommend-img">
-                <image src="{{item.cover}}" mode="aspectFill"></image>
+                <image class="recommend-img-src" src="{{item.cover}}" mode="aspectFill"></image>
             </view>
             <view class="recommend-cont">
                 <view class="nowrap recommend-name">

components/mallIndex_list/mallIndex_list.wxss

@@ -34,7 +34,7 @@
     padding-top: 100%;
 }
 
-.recommend-img image {
+.recommend-img-src {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -65,7 +65,6 @@
 .recommend-cost {
     font-size: 24rpx;
     color: #999;
-    /* text-decoration:line-through; */
     margin: 2rpx 0 0 20rpx;
 }
 

components/mallIndex_video/mallIndex_video.wxml

@@ -4,7 +4,7 @@
         <view class="videoTitle-name">
             <view class="videoTitle-name-color">商品直播间专区</view>
             <view class="videoTitle-name-img">
-                <image src="/static/mall_icon/liveIng_bf.png"></image>LIVE
+                <image class="videoTitle-name-img-img" src="/static/mall_icon/liveIng_bf.png"></image>LIVE
             </view>
         </view>
         <navigator hover-class="none" url="/pages/mall_video/mall_video" class="videoTitle-more">
@@ -16,7 +16,7 @@
             <view class="videoList-img">
                 <image class="videoList-cover" src="/static/images/goods_text.png" mode="aspectFill"></image>
                 <view class="videoList-tips">
-                    <image src="/static/mall_icon/liveIng_icon.png"></image>正在直播
+                    <image class="videoList-tips-image" src="/static/mall_icon/liveIng_icon.png"></image>正在直播
                 </view>
             </view>
             <view class="videoList-cont">

components/mallIndex_video/mallIndex_video.wxss

@@ -40,7 +40,7 @@
    margin-top: 5rpx;
 }
 
-.videoTitle-name-img image {
+.videoTitle-name-img-img {
     width: 34rpx;
     height: 34rpx;
     margin: 1rpx 6rpx 0 10rpx;
@@ -73,7 +73,7 @@
     padding-top: 80%;
 }
 
-.videoList-img .videoList-cover {
+.videoList-cover {
     position: absolute;
     top: 0;
     left: 0;
@@ -96,7 +96,7 @@
     box-shadow: 0 0 10rpx rgba(0, 0, 0, .05);
 }
 
-.videoList-tips image {
+.videoList-tips-image {
     width: 30rpx;
     height: 30rpx;
     margin: 8rpx 10rpx 6rpx 0;

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;
+}