tabbar 组件化

src/components/tabbar/tabbar.json

@@ -0,0 +1,5 @@
+{
+  "component": true,
+  "styleIsolation": "apply-shared",
+  "usingComponents": {}
+}

src/components/tabbar/tabbar.scss

@@ -0,0 +1,24 @@
+.tabbar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  width: 100vw;
+  .tabbar-img {
+    width: 100%;
+  }
+  .tabbar-wrap {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .tabbar-click {
+      flex: 1;
+      height: 100%;
+    }
+  }
+}

src/components/tabbar/tabbar.ts

@@ -0,0 +1,51 @@
+const app = getApp<IAppOption>();
+
+Component({
+  properties: {
+    current: {
+      type: Number,
+      value: 1,
+    },
+  },
+
+  data: {
+    imageUrl: app.globalData.imageUrl,
+    Timestamp: new Date().getTime(),
+  },
+
+  lifetimes: {
+    attached() {
+      this.setData({
+        Timestamp: new Date().getTime(),
+      });
+    },
+  },
+
+  methods: {
+    handleTabbar1() {
+      wx.reLaunch({
+        url: "/pages/1/index",
+      });
+    },
+    handleTabbar2() {
+      wx.reLaunch({
+        url: "/pages/4/index",
+      });
+    },
+    handleTabbar3() {
+      wx.navigateTo({
+        url: "/pages/7/index",
+      });
+    },
+    handleTabbar4() {
+      wx.reLaunch({
+        url: "/pages/5/index",
+      });
+    },
+    handleTabbar5() {
+      wx.reLaunch({
+        url: "/pages/6/index",
+      });
+    },
+  },
+});

src/components/tabbar/tabbar.wxml

@@ -0,0 +1,15 @@
+<view class="tabbar">
+  <image class="tabbar-img" mode="widthFix" src="{{imageUrl}}nmosd/tabbar{{current}}.png?t={{Timestamp}}"></image>
+  <view class="tabbar-wrap">
+    <view class="tabbar-click" wx:if="{{current !== 1}}" catch:tap="handleTabbar1"></view>
+    <view class="tabbar-click" wx:else></view>
+    <view class="tabbar-click" wx:if="{{current !== 2}}" catch:tap="handleTabbar2"></view>
+    <view class="tabbar-click" wx:else></view>
+    <view class="tabbar-click" wx:if="{{current !== 3}}" catch:tap="handleTabbar3"></view>
+    <view class="tabbar-click" wx:else></view>
+    <view class="tabbar-click" wx:if="{{current !== 4}}" catch:tap="handleTabbar4"></view>
+    <view class="tabbar-click" wx:else></view>
+    <view class="tabbar-click" wx:if="{{current !== 5}}" catch:tap="handleTabbar5"></view>
+    <view class="tabbar-click" wx:else></view>
+  </view>
+</view>

src/pages/1/index.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "tabbar": "/components/tabbar/tabbar"
+  }
 }

src/pages/1/index.scss

@@ -20,33 +20,6 @@
   background-color: transparent;
 }
 
-
-.tabbar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  z-index: 2;
-  width: 100vw;
-  padding-bottom: 20rpx;
-  .tabbar-img {
-    width: 100%;
-  }
-  .tabbar-wrap {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .tabbar-click {
-      flex: 1;
-      height: 160rpx;
-    }
-  }
-}
-
 .float1 {
   position: fixed;
   bottom: 0;

src/pages/1/index.ts

@@ -28,31 +28,6 @@ Page({
     });
     wx.setStorageSync("1float1", "1");
   },
-  handleTabbar1() {
-    wx.reLaunch({
-      url: "/pages/1/index",
-    });
-  },
-  handleTabbar2() {
-    wx.reLaunch({
-      url: "/pages/4/index",
-    });
-  },
-  handleTabbar3() {
-    wx.navigateTo({
-      url: "/pages/7/index",
-    });
-  },
-  handleTabbar4() {
-    wx.reLaunch({
-      url: "/pages/5/index",
-    });
-  },
-  handleTabbar5() {
-    wx.reLaunch({
-      url: "/pages/6/index",
-    });
-  },
 });
 
 export {};

src/pages/1/index.wxml

@@ -3,14 +3,4 @@
 <view class="{{start ? 'page-click2' : 'page-click1'}}" catch:tap="handelTap1"></view>
 <view class="{{start ? 'page-click1' : 'page-click2'}}" catch:tap="handelTap2"></view>
 
-<view class="tabbar">
+<tabbar current="{{1}}"></tabbar>
-  <image class="tabbar-img" mode="widthFix" src="{{imageUrl}}nmosd/tabbar1.png?t={{Timestamp}}"></image>
-  <view class="tabbar-wrap">
-    <view class="tabbar-click"></view>
-    <view class="tabbar-click" catch:tap="handleTabbar2"></view>
-    <view class="tabbar-click" catch:tap="handleTabbar3"></view>
-    <view class="tabbar-click" catch:tap="handleTabbar4"></view>
-    <view class="tabbar-click" catch:tap="handleTabbar5"></view>
-  </view>
-</view>
-

src/pages/4/index.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "tabbar": "/components/tabbar/tabbar"
+  }
 }

src/pages/4/index.scss

@@ -10,29 +10,3 @@
   height: 200rpx;
   background-color: transparent;
 }
-
-.tabbar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100vw;
-  padding-bottom: 20rpx;
-  .tabbar-img {
-    width: 100%;
-  }
-  .tabbar-wrap {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .tabbar-click {
-      flex: 1;
-      height: 160rpx;
-    }
-  }
-}
-

src/pages/4/index.ts

@@ -1,5 +1,3 @@
-const _app = getApp<IAppOption>();
-
 Page({
   data: {},
   onLoad() {},
@@ -14,31 +12,6 @@ Page({
       url: "/pages/6/index",
     });
   },
-  handleTabbar1() {
-    wx.reLaunch({
-      url: "/pages/1/index",
-    });
-  },
-  handleTabbar2() {
-    wx.reLaunch({
-      url: "/pages/4/index",
-    });
-  },
-  handleTabbar3() {
-    wx.navigateTo({
-      url: "/pages/7/index",
-    });
-  },
-  handleTabbar4() {
-    wx.reLaunch({
-      url: "/pages/5/index",
-    });
-  },
-  handleTabbar5() {
-    wx.reLaunch({
-      url: "/pages/6/index",
-    });
-  },
 });
 
 export {};

src/pages/4/index.wxml

@@ -1,12 +1,4 @@
+<navigation-bar></navigation-bar>
 <image class="page" mode="widthFix" src="{{imageUrl}}nmosd/012.png?t={{Timestamp}}"></image>
 
-<view class="tabbar">
+<tabbar current="{{2}}"></tabbar>
-  <image class="tabbar-img" mode="widthFix" src="{{imageUrl}}nmosd/tabbar2.png?t={{Timestamp}}"></image>
-  <view class="tabbar-wrap">
-    <view class="tabbar-click" catch:tap="handleTabbar1"></view>
-    <view class="tabbar-click"></view>
-    <view class="tabbar-click" catch:tap="handleTabbar3"></view>
-    <view class="tabbar-click" catch:tap="handleTabbar4"></view>
-    <view class="tabbar-click" catch:tap="handleTabbar5"></view>
-  </view>
-</view>

src/pages/5/index.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "tabbar": "/components/tabbar/tabbar"
+  }
 }

src/pages/5/index.scss

@@ -1,29 +1,4 @@
-.page{
+.page {
   width: 100vw;
   padding-bottom: 260rpx;
 }
-
-.tabbar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100vw;
-  padding-bottom: 20rpx;
-  .tabbar-img {
-    width: 100%;
-  }
-  .tabbar-wrap {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .tabbar-click {
-      flex: 1;
-      height: 160rpx;
-    }
-  }
-}

src/pages/5/index.ts

@@ -1,34 +1,9 @@
-const _app = getApp<IAppOption>();
-
 Page({
   data: {},
   onLoad() {},
   handleTap1() {
-    wx.navigateBack();
-  },
-  handleTabbar1() {
-    wx.reLaunch({
-      url: "/pages/1/index",
-    });
-  },
-  handleTabbar2() {
-    wx.reLaunch({
-      url: "/pages/4/index",
-    });
-  },
-  handleTabbar3() {
     wx.navigateTo({
-      url: "/pages/7/index",
+      url: "/pages/3/index",
-    });
-  },
-  handleTabbar4() {
-    wx.reLaunch({
-      url: "/pages/5/index",
-    });
-  },
-  handleTabbar5() {
-    wx.reLaunch({
-      url: "/pages/6/index",
     });
   },
 });

src/pages/5/index.wxml

@@ -1,13 +1,4 @@
 <navigation-bar></navigation-bar>
 <image class="page" mode="widthFix" src="{{imageUrl}}nmosd/05.png?t={{Timestamp}}" bind:tap="handleTap1"></image>
 
-<view class="tabbar">
+<tabbar current="{{4}}"></tabbar>
-  <image class="tabbar-img" mode="widthFix" src="{{imageUrl}}nmosd/tabbar3.png?t={{Timestamp}}"></image>
-  <view class="tabbar-wrap">
-    <view class="tabbar-click" catch:tap="handleTabbar1"></view>
-    <view class="tabbar-click" catch:tap="handleTabbar2"></view>
-    <view class="tabbar-click" catch:tap="handleTabbar3"></view>
-    <view class="tabbar-click"></view>
-    <view class="tabbar-click" catch:tap="handleTabbar5"></view>
-  </view>
-</view>

src/pages/6/index.json

@@ -1,3 +1,5 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "tabbar": "/components/tabbar/tabbar"
+  }
 }

src/pages/6/index.scss

@@ -1,28 +1,3 @@
-.page{
+.page {
   width: 100vw;
 }
-
-.tabbar {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100vw;
-  padding-bottom: 20rpx;
-  .tabbar-img {
-    width: 100%;
-  }
-  .tabbar-wrap {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    .tabbar-click {
-      flex: 1;
-      height: 160rpx;
-    }
-  }
-}

src/pages/6/index.ts

@@ -1,38 +1,8 @@
-const _app = getApp<IAppOption>();
-
 Page({
   data: {},
   onLoad() {},
   handleTap1() {
-    wx.navigateTo({
+    wx.navigateBack();
-      url: "/pages/3/index",
-    })
-  },
-
-  handleTabbar1() {
-    wx.reLaunch({
-      url: "/pages/1/index",
-    });
-  },
-  handleTabbar2() {
-    wx.reLaunch({
-      url: "/pages/4/index",
-    });
-  },
-  handleTabbar3() {
-    wx.navigateTo({
-      url: "/pages/7/index",
-    });
-  },
-  handleTabbar4() {
-    wx.reLaunch({
-      url: "/pages/5/index",
-    });
-  },
-  handleTabbar5() {
-    wx.reLaunch({
-      url: "/pages/6/index",
-    });
   },
 });
 

src/pages/6/index.wxml

@@ -1,13 +1,4 @@
 <navigation-bar></navigation-bar>
 <image class="page" mode="widthFix" src="{{imageUrl}}nmosd/014.png?t={{Timestamp}}" bind:tap="handleTap1"></image>
 
-<view class="tabbar">
+<tabbar current="{{5}}"></tabbar>
-  <image class="tabbar-img" mode="widthFix" src="{{imageUrl}}nmosd/tabbar4.png?t={{Timestamp}}"></image>
-  <view class="tabbar-wrap">
-    <view class="tabbar-click" catch:tap="handleTabbar1"></view>
-    <view class="tabbar-click" catch:tap="handleTabbar2"></view>
-    <view class="tabbar-click" catch:tap="handleTabbar3"></view>
-    <view class="tabbar-click" catch:tap="handleTabbar4"></view>
-    <view class="tabbar-click"></view>
-  </view>
-</view>