話不多說，先上效果圖
這個功能實現(xiàn)思路:

1. 首先先拿到這一張整圖(快捷，精確)
2. 然后獲取整個導航欄高度(自定義導航欄,非自定義導航欄忽略這一步)
3. 獲取三個點的做偏移量，把高度和偏移量給到一個定位到盒子，這個盒子里就放這個圖片，然后給這個盒子再使用transform設置偏移量調整到一個合適的位置
   下面是代碼步驟：

  <view class="tip" :style="[{ top: nav_height + 'px' }]"><!-- <view style="height:80rpx;background-color: yellow;"></view>放置別的模塊 --><view class="care-box" v-if="dropToast"><view :class="['care',]" :style="[{left:dropOffset+'px'}]" @click.stop="()=>{}" :animation="animationData"><image class="care-bgc" src="xxx.png" /><view class="close-box" @click.stop="closeCare"></view></view></view></view>

	// 獲取頂部導航欄getNav(){const system = wx.getSystemInfoSync()const res = uni.getMenuButtonBoundingClientRect()const statusHeight = res.top //膠囊距離頂部const navHeight = res.height //膠囊高度// 膠囊頂部距離狀態(tài)欄的距離（等同于膠囊底部與頁面頂部的距離）const spacing = res.top - system.statusBarHeight// 頁面縱標的起始位置const pageStart = res.bottom + spacing// 根據(jù)需要多幾個px偏移量this.nav_height = pageStart + 3 + 'px'console.log(pageStart)}// 獲取三個點中間的那個左偏移量getOffSet() {const rect = wx.getMenuButtonBoundingClientRect();const drop = Math.floor(rect.width/2/2)this.dropOffset = rect.left + drop},	

    .tip {position:fixed;left:0;right:0;z-index: 999;}.care-box {position: relative;width: 100%;display:flex;transform: translateY(10rpx);.care {position: absolute;bottom:0;transform: translate(-55%,90%);opacity:0;margin-right:12rpx;.care-bgc {width: 286rpx;height: 83rpx;}.close-box {position: absolute;z-index: 11;top: 10rpx;right: 0rpx;width: 50rpx;height: 40rpx;}}}

end !