2019-3-3 22:51:13

demo/pages/about/test/custom.js

@@ -0,0 +1,19 @@
+const app = getApp()
+
+Page({
+  data: {
+
+  },
+  onLoad: function () {
+    wx.getSystemInfo({
+      success: e => {
+        let custom = wx.getMenuButtonBoundingClientRect();
+        this.setData({
+          StatusBar: e.statusBarHeight,
+          Custom: custom,
+          CustomBar: custom.bottom + custom.top - e.statusBarHeight
+        })
+      }
+    })
+  },
+})

demo/pages/about/test/custom.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

demo/pages/about/test/custom.wxml

@@ -0,0 +1,6 @@
+<view class="custom" style="height:{{CustomBar}}px;">
+  <view class="bar" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
+    <navigator class='border-custom' open-type="navigateBack" delta="1" hover-class="none" style='width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)'></navigator>
+  </view>
+</view>
+<view class='StatusBar' style="height:{{StatusBar}}px;" ></view>

demo/pages/about/test/custom.wxss

@@ -0,0 +1,22 @@
+.custom {
+  background-color: #333;
+}
+.bar{
+  display: flex;
+  align-items: center;
+  background: #555;
+  position: fixed;
+  top: 0;
+  width: 50%;
+}
+.StatusBar {
+  position: fixed;
+  background-color: #da0000;
+  width: 75%;
+  top: 0;
+  left: 0;
+}
+.border-custom{
+  background-color: #fff;
+  border-radius: 50px;  
+}

demo/pages/about/test/list.wxml

@@ -9,7 +9,7 @@
   <navigator url='filter' class='bg-grey padding radius'>
     <text>filter：blur引起的ios花屏测试</text>
   </navigator>
-  <!-- <navigator url='filter' class='bg-grey padding radius margin-top'>
-    <text>filter：blur引起的ios花屏测试</text>
-  </navigator> -->
+  <navigator url='custom' class='bg-grey padding radius margin-top'>
+    <text>胶囊按钮的Api测试</text>
+  </navigator>
 </view>