微信小程序右上角胶囊的位置

 

参考：https://www.cnblogs.com/luoshida/p/13434197.html

右上角胶囊的信息,包含width、height、top等

let rect= wx.getMenuButtonBoundingClientRect();

 

机型信息

let info=wx.getSystemInfoSync();

 

胶囊底部到手机最上面的距离

rect.bottom

 

胶囊三个点到屏幕右边的距离，这个需要赋值给right，即right等于以下

this.setData({

left: wx.getMenuButtonBoundingClientRect().left + wx.getMenuButtonBoundingClientRect().width / 3

})

 

 

 

 

以下是代码：

 wxml：

  <view style="position: absolute; "  wx:if="{{lastStep}}" >
 
 <view class="stepbox3" style="left: {{left - 40}}px">
   <view class="Angle3" style="left: {{left2}}px"></view>
   添加到我的小程序
   <!-- <view class="next" bindtap="compoleteFun">完成</view> -->
 </view>
</view>

 

 wxss：

.Angle3 {
  display: flex;
  align-items: center;
  z-index: 10;
  position: fixed;
  top: 3px;
  font-size: 25rpx;
  /* left: 344px; */
  /* background: pink; */


  

}
.Angle3:after {
  content: '';
  position: absolute;
  /* top: -25rpx;
  left: 20rpx; */
  border-top: 15rpx solid transparent;
  border-bottom: 15rpx solid rgba(0,0, 0, 0.8);
  border-left: 15rpx solid transparent;
  border-right: 15rpx solid transparent;
  position: absolute;
  margin-left: -10px;
  z-index: -1;
  /* filter: blur(2px); */
}
.stepbox3 {
  padding: 10px;
  border-radius: 10px;
  background: rgba(0,0, 0, 0.8);
  position: fixed;
  min-width: 232rpx;
  opacity: 0.8;
  left: 249px;
  z-index: 22;
  top: 10px;
  color: #fff;
  font-size: 30rpx;
  /* white-space: nowrap; */
}

js

data:{
      left: 0, // 胶囊位置
    left2: 0, // 三角度位置
}

 onLoad: function (options) {
    var res = wx.getSystemInfoSync()
 

    var left;
    if(res.platform == 'ios') {
       left = wx.getMenuButtonBoundingClientRect().left -  wx.getMenuButtonBoundingClientRect().width / 3;
    
    } else {
      left = wx.getMenuButtonBoundingClientRect().left -  wx.getMenuButtonBoundingClientRect().width / 3
    }
    this.setData({
      left:  left,
      left2:  wx.getMenuButtonBoundingClientRect().left + wx.getMenuButtonBoundingClientRect().width / 3
    })
  },