小程序定位到胶囊的三个点大概中间

news2024/11/15 7:23:11

话不多说，先上效果图在这里插入图片描述
这个功能实现思路:

首先先拿到这一张整图(快捷，精确)
然后获取整个导航栏高度(自定义导航栏,非自定义导航栏忽略这一步)
获取三个点的做偏移量，把高度和偏移量给到一个定位到盒子，这个盒子里就放这个图片，然后给这个盒子再使用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;
                }

        }
    }