feat: 切换至自定义 tabbar 模式并且编写页面使用 tabbar

2026-01-14 15:46:22 +08:00
parent 331b0383e3
commit 0bb60ea59a
17 changed files with 253 additions and 1 deletions
@@ -1,11 +1,43 @@
 {
-  "pages": ["pages/date/date", "pages/login/login", "pages/index/index"],
+  "pages": [
+    "pages/date/date",
+    "pages/login/login",
+    "pages/index/index",
+    "pages/one/index",
+    "pages/two/index",
+    "pages/three/index",
+    "pages/four/index"
+  ],
  "window": {
    "navigationStyle": "default",
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "My Weapp Template"
  },
+  "tabBar": {
+    "custom": true,
+    "color": "#000000",
+    "selectedColor": "#000000",
+    "backgroundColor": "#000000",
+    "list": [
+      {
+        "pagePath": "pages/one/index",
+        "text": "页面一"
+      },
+      {
+        "pagePath": "pages/two/index",
+        "text": "页面二"
+      },
+      {
+        "pagePath": "pages/three/index",
+        "text": "页面三"
+      },
+      {
+        "pagePath": "pages/four/index",
+        "text": "页面四"
+      }
+    ]
+  },
  "style": "v2",
  "renderer": "webview",
  "componentFramework": "glass-easel",
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
@@ -0,0 +1 @@
+/* pages/four/index.wxss */
@@ -0,0 +1,49 @@
+// pages/four/index.ts
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {},
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad() {},
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {},
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+    this.getTabBar().init()
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {},
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {},
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {},
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {},
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {},
+})
@@ -0,0 +1,2 @@
+<!--pages/four/index.wxml-->
+<text>pages/four/index.wxml</text>
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
@@ -0,0 +1 @@
+/* pages/one/index.wxss */
@@ -0,0 +1,49 @@
+// pages/one/index.ts
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {},
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad() {},
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {},
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+    this.getTabBar().init()
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {},
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {},
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {},
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {},
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {},
+})
@@ -0,0 +1,2 @@
+<!--pages/one/index.wxml-->
+<text>pages/one/index.wxml</text>
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
@@ -0,0 +1 @@
+/* pages/three/index.wxss */
@@ -0,0 +1,49 @@
+// pages/three/index.ts
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {},
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad() {},
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {},
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+    this.getTabBar().init()
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {},
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {},
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {},
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {},
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {},
+})
@@ -0,0 +1,2 @@
+<!--pages/three/index.wxml-->
+<text>pages/three/index.wxml</text>
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
@@ -0,0 +1 @@
+/* pages/two/index.wxss */
@@ -0,0 +1,49 @@
+// pages/two/index.ts
+Page({
+  /**
+   * 页面的初始数据
+   */
+  data: {},
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad() {},
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady() {},
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow() {
+    this.getTabBar().init()
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide() {},
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload() {},
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh() {},
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom() {},
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage() {},
+})
@@ -0,0 +1,2 @@
+<!--pages/two/index.wxml-->
+<text>pages/two/index.wxml</text>