project init & fix ui

pages/foot-tab/foot-tab.js

@@ -0,0 +1,81 @@
+// pages/component/foot-tab.js
+Component({
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        value: {
+            type: String,
+            value: null
+        }
+    },
+
+    lifetimes: {
+        created() {
+
+        },
+        attached: function () {
+            // 在组件实例进入页面节点树时执行
+        },
+        detached: function () {
+            // 在组件实例被从页面节点树移除时执行
+        },
+    },
+
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        list: [
+            { value: 'label_1', icon: 'home', ariaLabel: '首页' },
+            { value: 'label_2', icon: 'app', ariaLabel: '统计' },
+            { value: 'label_3', icon: 'chat', ariaLabel: '资产' },
+            { value: 'label_4', icon: 'user', ariaLabel: '我的' },
+        ],
+    },
+
+    /**
+     * 组件的方法列表
+     */
+    methods: {
+        setIconData(cur){
+            if (cur == 'label_1'){
+                wx.redirectTo({
+                    url: '../index/index'
+                })
+            }
+            if (cur == 'label_2'){
+                wx.redirectTo({
+                    url: '../chart/index'
+                })
+            }
+            if (cur == 'label_3'){
+                wx.redirectTo({
+                    url: '../account/index'
+                })
+            }
+            if (cur == 'label_4'){
+                wx.redirectTo({
+                    url: '../myself/index'
+                })
+            }
+        },
+
+        checkLogin(){
+            // let userInfo = wx.getStorageSync('userInfo');
+            // let token = wx.getStorageSync('userToken');
+            // if (userInfo && token){
+            //     return true;
+            // }else {
+            //     return false;
+            // }
+        },
+
+        onChange(event) {
+            // if (!this.checkLogin()){
+            //     wx.redirectTo({url:"/pages/login/index"});
+            // }
+            this.setIconData(event.detail.value);
+        },
+    }
+})

pages/foot-tab/foot-tab.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "usingComponents": {
+        "t-tab-bar": "/miniprogram_npm/tdesign-miniprogram/tab-bar/tab-bar",
+        "t-tab-bar-item": "/miniprogram_npm/tdesign-miniprogram/tab-bar/tab-bar-item"
+    }
+}

pages/foot-tab/foot-tab.wxml

@@ -0,0 +1,11 @@
+<t-tab-bar class="custom-tab-bar" value="{{value}}" bindchange="onChange" shape="round" theme="tag" split="{{false}}">
+  <t-tab-bar-item
+          wx:for="{{list}}"
+          wx:key="index"
+          value="{{item.value}}"
+          icon="{{item.icon}}"
+          ariaLabel="{{item.ariaLabel}}"
+  >
+    {{item.label}}
+  </t-tab-bar-item>
+</t-tab-bar>

pages/foot-tab/foot-tab.wxss

@@ -0,0 +1,4 @@
+/* pages/component/foot-tab.wxss */
+.custom-tab-bar {
+    --td-tab-bar-active-bg: var(--td-color-block-check);
+}