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

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

  <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>

	// 獲取頂部導(dǎo)航欄getNav(){const system = wx.getSystemInfoSync()const res = uni.getMenuButtonBoundingClientRect()const statusHeight = res.top //膠囊距離頂部const navHeight = res.height //膠囊高度// 膠囊頂部距離狀態(tài)欄的距離（等同于膠囊底部與頁(yè)面頂部的距離）const spacing = res.top - system.statusBarHeight// 頁(yè)面縱標(biāo)的起始位置const pageStart = res.bottom + spacing// 根據(jù)需要多幾個(gè)px偏移量this.nav_height = pageStart + 3 + 'px'console.log(pageStart)}// 獲取三個(gè)點(diǎn)中間的那個(gè)左偏移量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 !