[更新]新增动态tabBar

apis/interfaces/public.js

@@ -6,8 +6,10 @@ import {req} from "../request"
 
 const richText = (key) => req({url: "single/" + key, data: {key: "string"}}) //富文本
 const getStatus = (key) => req({url: "ajax/status/" + key})  //状态查询
+const storeConfig = (data) => req({url: "wechat/mini/myComponents", data: data})  //企业工具模块配置
 
 export default({
     richText,
-    getStatus
+    getStatus,
+    storeConfig
 })

app.js

@@ -18,6 +18,13 @@ App({
 
         //挂载api方法
         wx.$api = apis
+
+        //获取模版信息
+        apis.publics.storeConfig({
+            company_id: "17"
+        }).then(res=>{
+            console.log(res)
+        })
     },
     globalData: {
         navAppInfo  : {
@@ -25,6 +32,25 @@ App({
             envVersion  : "trial",
             goodUrl     : "/pages/goods/show?goodsId=",
             cardUrl     : "/pages/card/index?cardid="
+        },
+        storeModule: {
+            selected     : 0,
+            color        : "#4e4f51",
+            selectedColor: "#0b0041",
+            list         : [
+                {
+                    "pagePath": "/pages/mall/index",
+                    "text": "商城",
+                    "iconPath": "/static/tabbar/tabbar_icon_01.png",
+                    "selectedIconPath": "/static/tabbar/tabbar_icon_show_01.png"
+                },
+                {
+                    "pagePath": "/pages/user/index",
+                    "text": "我的",
+                    "iconPath": "/static/tabbar/tabbar_icon_03.png",
+                    "selectedIconPath": "/static/tabbar/tabbar_icon_show_03.png"
+                }
+            ]
         }
     }
 })

app.json

@@ -23,6 +23,38 @@
         "pages/home/projectSuccess/projectSuccess",
         "pages/home/activeSuccess/activeSuccess"
     ],
+    "tabBar": {
+        "list": [
+            {
+                "pagePath": "pages/mall/index",
+                "text": "首页",
+                "iconPath": "/static/tabbar/tabbar_icon_00.png",
+                "selectedIconPath": "/static/tabbar/tabbar_icon_show_00.png"
+            },
+            {
+                "pagePath": "pages/mall/index",
+                "text": "商城",
+                "iconPath": "/static/tabbar/tabbar_icon_01.png",
+                "selectedIconPath": "/static/tabbar/tabbar_icon_show_01.png"
+            },
+            {
+                "pagePath": "pages/ticket/index",
+                "text": "优惠",
+                "iconPath": "/static/tabbar/tabbar_icon_02.png",
+                "selectedIconPath": "/static/tabbar/tabbar_icon_show_02.png"
+            },
+            {
+                "pagePath": "pages/user/index",
+                "text": "我的",
+                "iconPath": "/static/tabbar/tabbar_icon_03.png",
+                "selectedIconPath": "/static/tabbar/tabbar_icon_show_03.png"
+            }
+        ],
+        "selectedColor": "#0b0041",
+        "color": "#4e4f51",
+        "borderStyle": "white",
+        "custom": true
+    },
     "window": {
         "backgroundTextStyle": "light",
         "navigationBarBackgroundColor": "#fff",

custom-tab-bar/index.js

@@ -0,0 +1,43 @@
+
+/**
+ *  Web唐明明
+ *  匆匆数载恍如梦，岁月迢迢华发增。
+ *  碌碌无为枉半生，一朝惊醒万事空。
+ */
+
+Component({
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        selected     : getApp().globalData.storeModule.selected,
+        color        : getApp().globalData.storeModule.color,
+        selectedColor: getApp().globalData.storeModule.selectedColor,
+        list         : getApp().globalData.storeModule.list
+    },
+
+    /**
+     * 生命周期函数
+     */
+    pageLifetimes: {
+        show(){
+            console.log("获取配置信息")
+        }
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        switchTab(e) {
+            const data = e.currentTarget.dataset
+            const url  = data.path
+            wx.switchTab({
+                url
+            })
+            this.setData({
+                selected: data.index
+            })
+        }
+    }
+})

custom-tab-bar/index.json

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

custom-tab-bar/index.wxml

@@ -0,0 +1,9 @@
+
+<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 src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
+        <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
+    </cover-view>
+</cover-view>

custom-tab-bar/index.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 cover-image {
+    width: 24px;
+    height: 24px;
+}
+
+.tab-bar-item cover-view {
+    font-size: 10px;
+}