门户建设网站方案大连商城网站制作
话不多说，先上效果图
这个功能实现思路:
- 首先先拿到这一张整图(快捷，精确)
- 然后获取整个导航栏高度(自定义导航栏,非自定义导航栏忽略这一步)
- 获取三个点的做偏移量，把高度和偏移量给到一个定位到盒子，这个盒子里就放这个图片，然后给这个盒子再使用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 //胶囊高度// 胶囊顶部距离状态栏的距离（等同于胶囊底部与页面顶部的距离）const spacing = res.top - system.statusBarHeight// 页面纵标的起始位置const pageStart = res.bottom + spacing// 根据需要多几个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 !