2019-3-3 22:51:13

demo/app.json

@@ -35,7 +35,8 @@
     "pages/about/home/home",
     "custom-tab-bar/index",
     "pages/plugin/drawer/drawer",
-    "pages/plugin/verticalnav/verticalnav"
+    "pages/plugin/verticalnav/verticalnav",
+    "pages/about/test/custom"
   ],
   "window": {
     "navigationBarBackgroundColor": "#39b54a",

demo/app.wxss

@@ -1,6 +1,10 @@
 @import "icon.wxss";
 @import "colorui.wxss";
 
+.cu-btn.button-hover {
+  pointer-events: none;
+}
+
 .cu-modal.show {
   z-index: 99999;
 }

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

demo/pages/basics/button/button.js

@@ -15,4 +15,7 @@ Page({
       bordersize: e.detail.value
     })
   },
+  input(){
+    console.log();
+  }
 });

demo/pages/basics/button/button.wxml

@@ -15,7 +15,7 @@
   </view>
 </view>
 <view class="padding flex flex-wrap justify-between align-center bg-white">
-  <button class='cu-btn'>默认</button>
+  <button class='cu-btn' bindtap='input'>默认</button>
   <button class='cu-btn round'>圆角</button>
   <button class='cu-btn icon'>
     <text class='icon-emojifill'></text>

demo/pages/basics/home/home.js

@@ -63,19 +63,6 @@ Component({
     ],
   },
   methods: {
-    onLoad() {
-      let that = this;
-      // 获取用户信息
-      wx.getSetting({
-        success: res => {
-          if (!res.authSetting['scope.userInfo']) {
-            wx.redirectTo({
-              url: '/pages/auth/auth'
-            })
-          }
-        }
-      })
-    },
     showModal(e) {
       this.setData({
         modalName: e.currentTarget.dataset.target

demo/pages/component/bar/bar.wxss

@@ -1,5 +1,5 @@
 .box {  
-  margin: 20rpx; 
+  margin: 30rpx 0; 
 }
 
 .box view.cu-bar {

demo/pages/plugin/drawer/drawer.wxml

@@ -37,13 +37,95 @@
       </block>
     </view>
   </view>
+  <scroll-view scroll-y style='height:calc(100vh - {{CustomBar}}px)'>
     <view wx:for="{{10}}" wx:key wx:if="{{index==TabCur}}" class='padding margin text-center'>
       <view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
       <view class='text-xl margin-xl'>点击头像打开抽屉</view>
       <navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
         <text class='icon-back'> </text> 返回上一页
       </navigator>
+      <view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
+      <view class='text-xl margin-xl'>点击头像打开抽屉</view>
+      <navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
+        <text class='icon-back'> </text> 返回上一页
+      </navigator>
+      <view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
+      <view class='text-xl margin-xl'>点击头像打开抽屉</view>
+      <navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
+        <text class='icon-back'> </text> 返回上一页
+      </navigator>
+      <view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
+      <view class='text-xl margin-xl'>点击头像打开抽屉</view>
+      <navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
+        <text class='icon-back'> </text> 返回上一页
+      </navigator>
+      <view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
+      <view class='text-xl margin-xl'>点击头像打开抽屉</view>
+      <navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
+        <text class='icon-back'> </text> 返回上一页
+      </navigator>
+      <view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
+      <view class='text-xl margin-xl'>点击头像打开抽屉</view>
+      <navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
+        <text class='icon-back'> </text> 返回上一页
+      </navigator>
+      <view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
+      <view class='text-xl margin-xl'>点击头像打开抽屉</view>
+      <navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
+        <text class='icon-back'> </text> 返回上一页
+      </navigator>
+      <view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
+      <view class='text-xl margin-xl'>点击头像打开抽屉</view>
+      <navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
+        <text class='icon-back'> </text> 返回上一页
+      </navigator>
+      <view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
+      <view class='text-xl margin-xl'>点击头像打开抽屉</view>
+      <navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
+        <text class='icon-back'> </text> 返回上一页
+      </navigator>
+      <view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
+      <view class='text-xl margin-xl'>点击头像打开抽屉</view>
+      <navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
+        <text class='icon-back'> </text> 返回上一页
+      </navigator>
+      <view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
+      <view class='text-xl margin-xl'>点击头像打开抽屉</view>
+      <navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
+        <text class='icon-back'> </text> 返回上一页
+      </navigator>
+      <view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
+      <view class='text-xl margin-xl'>点击头像打开抽屉</view>
+      <navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
+        <text class='icon-back'> </text> 返回上一页
+      </navigator>
+      <view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
+      <view class='text-xl margin-xl'>点击头像打开抽屉</view>
+      <navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
+        <text class='icon-back'> </text> 返回上一页
+      </navigator>
+      <view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
+      <view class='text-xl margin-xl'>点击头像打开抽屉</view>
+      <navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
+        <text class='icon-back'> </text> 返回上一页
+      </navigator>
+      <view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
+      <view class='text-xl margin-xl'>点击头像打开抽屉</view>
+      <navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
+        <text class='icon-back'> </text> 返回上一页
+      </navigator>
+      <view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
+      <view class='text-xl margin-xl'>点击头像打开抽屉</view>
+      <navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
+        <text class='icon-back'> </text> 返回上一页
+      </navigator>
+      <view class='text-bold text-xxl margin-xl'>Tab{{index}}</view>
+      <view class='text-xl margin-xl'>点击头像打开抽屉</view>
+      <navigator class='cu-btn bg-green lg block shadow radius margin-xl' open-type="navigateBack" delta="1" hover-class="none">
+        <text class='icon-back'> </text> 返回上一页
+      </navigator>
     </view>
+  </scroll-view>
 </view>
 <view class="DrawerClose {{modalName=='viewModal'?'show':''}}" bindtap='hideModal'>
   <text class='icon-pullright'></text>

demo/project.config.json

@@ -11,7 +11,7 @@
 		"newFeature": true
 	},
 	"compileType": "miniprogram",
-	"libVersion": "2.5.2",
+	"libVersion": "2.6.1",
 	"appid": "wxfd5241d66a07713f",
 	"projectname": "ColorUI2.0-demo",
 	"debugOptions": {
@@ -36,7 +36,7 @@
 			"list": []
 		},
 		"miniprogram": {
-			"current": 32,
+			"current": 33,
 			"list": [
 				{
 					"id": 0,
@@ -233,10 +233,18 @@
 					"query": ""
 				},
 				{
-					"id": -1,
+					"id": 32,
 					"name": "4.3 --- filter：blur引起的ios花屏测试",
 					"pathName": "pages/about/test/filter",
-					"query": ""
+					"query": "",
+					"scene": null
+				},
+				{
+					"id": -1,
+					"name": "4.3 --- 胶囊按钮的Api测试",
+					"pathName": "pages/about/test/custom",
+					"query": "",
+					"scene": null
 				}
 			]
 		}