微信小程序镜像胶囊组件（colorui）

经过数万次的调试，终于镜像出右上角的胶囊！

示例：

细节：
1.胶囊距屏幕顶部距离自适应
2.胶囊高度自适应
3.胶囊点击后可像原生组件一样产生反馈（图标变灰）
4.简化wxml代码，只要4行

下面给出代码：

capsule.wxml

<view class="capsule-box" style="top:{{capsuleTop}}px;height:{{capsuleHeight}}px;">
    <navigator class='cuIcon-back' open-type="navigateBack"></navigator>
    <navigator wx:if="{{iconSelect == 'home'}}" class='cuIcon-home' open-type="switchTab" url="/pages/index/index"></navigator>
</view>

capsule.wxss

@import "/miniprogram_npm/colorui/main.wxss";
@import "/miniprogram_npm/colorui/icon.wxss";
/*-------胶囊按钮-------*/
.capsule-box{
  position: fixed;
  margin-left: 10px;
  background: rgba(0,0,0,.16);
  color: #fff;
  border-radius: 25px;
  padding: 4px 4px;
  border: 1rpx solid rgba(255,255,255,0.25);
  z-index: 99;
}

.capsule-box navigator{
  padding: 8px;
  font-size: 20px;
  display: initial;
}
.capsule-box navigator + navigator{
  border-left: 1px solid rgba(255,255,255,0.15);
  margin: 0 3px;
  padding: 0 5px;
  padding-left: 15px;
}

.navigator-hover {
  color: gray;
  background: none;
}

capsule.js

const app = getApp();

Component({
    options: {
        styleIsolation: 'isolated'
    },
    properties: {
        iconSelect: {
            type: String,
            value: 'home'
        }
    },
    data: {
        capsuleTop: app.globalData.capsuleTop,
        capsuleHeight: app.globalData.capsuleHeight
    },
})

app.js

async onLaunch () {
	let menuButtonObject = wx.getMenuButtonBoundingClientRect(); // 获取胶囊按钮信息
	wx.getSystemInfo({
	    success: res => {
	        console.log('menuButtonObject', menuButtonObject)
	        console.log('getSystemInfo', res)
	        let statusBarHeight = res.statusBarHeight,  // 顶部状态栏高度
	        capsuleTop = menuButtonObject.top,  //胶囊按钮与顶部的距离
	        navHeight = statusBarHeight + menuButtonObject.height + (menuButtonObject.top - statusBarHeight) * 2;//导航栏的高度（不包括状态栏）
	        this.globalData.navHeight = navHeight; 
	        this.globalData.capsuleTop = capsuleTop;
	        this.globalData.capsuleHeight = menuButtonObject.height;  // 胶囊按钮高度
	        this.globalData.windowHeight = res.windowHeight;  // 屏幕高度
	        
	    },
	    fail(err) {
	        console.log(err);
	    }
	})
}