uniapp小程序页面实现元素与胶囊进行居中对齐

无论是否为uni,关键在于获取胶囊中点的位置，如果是原生小程序根据小程序文档获取，其余逻辑处理是一致的
代码语法都只是技术选择，重点是逻辑处理，对于技术的运用，代码技术好比是积木，好的程序就是好的组合代码，利用技术的特点进行组合，

1.效果

image.png

实现代码

元素预览.png
template代码.png

    fixedTop() {
      let serchTop = 0
      if (utils.getPlatForm() === 'mp-weixin') {
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
        // 胶囊中点距离顶部位置
        let menuButtonCenterPos = menuButtonInfo.top + menuButtonInfo.height / 2

        // rpx 与 px转换存在系数 uni获取的胶囊位置为px
        // 计算最终元素距离顶部的位置   eleHeightwei元素的高度一半  =>  给需要居中的元素设置为 胶囊中点 - 元素高度一半
        serchTop = menuButtonCenterPos - uni.upx2px(eleHeight)
      }
      return serchTop
    },

具体原理

为了便于理解 就是先将要居中的元素 距离顶部的距离为胶囊中点的位置，再把元素上移元素高度的一半，两者中点就一致了

计算胶囊中点.png
设置元素中点.png