first commit

custom-tab-bar/index.js

@@ -0,0 +1,44 @@
+Component({
+  data: {
+    selected: 0,
+    color: "#bfbfbf",
+    selectedColor: "#337AFF",
+    list: [
+      {
+        pagePath: "/pages/index/index",
+        iconPath: "/images/主页.png",
+        selectedIconPath: "/images/主页点击.png",
+        text: "首页"
+      },
+      {
+        pagePath: "/pages/aitools/aitools",
+        iconPath: "/images/AI分析.png",
+        selectedIconPath: "/images/AI分析.png",
+        text: "写文案"
+      },
+      {
+        pagePath: "/pages/video_list/video_list",
+        iconPath: "/images/文案库.png",
+        selectedIconPath: "/images/文案库点击.png",
+        text: "违规检测"
+      },
+      {
+        pagePath: "/pages/mine/mine",
+        iconPath: "/images/my.png",
+        selectedIconPath: "/images/我的点击.png",
+        text: "我的"
+      }
+    ]
+  },
+  attached() {},
+  methods: {
+    switchTab(e) {
+      const data = e.currentTarget.dataset
+      const url = data.path
+      console.log(data)
+        wx.switchTab({
+          url
+        })
+      }
+  }
+});

custom-tab-bar/index.json

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

custom-tab-bar/index.wxml

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

custom-tab-bar/index.wxss

@@ -0,0 +1,35 @@
+.tab-bar {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  height: 60px;
+  background-color: #222238;
+  border-top:solid 1px  rgba(233, 213, 213,0.5);
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+   z-index: 9999; /* 确保 z-index 足够高 */
+}
+
+.tab-bar-item {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+
+  transition: all 0.3s;
+}
+
+
+.tab-bar-icon {
+  width: 24px;
+  height: 24px;
+  margin-bottom: 5px;
+}
+
+.tab-bar-text {
+  margin-bottom: 10px;
+  font-size: 12px;
+  font-family: Arial, sans-serif;
+}