【Uni-app‘解决搜索框与导航栏胶囊自适应对齐‘】

简单看一下页面布局,最上方是一个空盒子,下面的盒子用来盛放搜索框以及图标

先从data里面设置一下默认的高度和宽度,然后使用uni.getSystemInfoSync的API获取顶部状态栏的高度

// 状态栏高度
       capsuleHeight: 20,
       navBarHeight: 45,
       // 可视区域高度
       windowWidth: 375,
       // 胶囊高度
       pillheight:0,
       top: 0,
       val: ''

uni.getMenuButtonBoundingClientRect获取胶囊的高度和顶部的距离,然后将搜索框的宽高和顶部的距离绑定到胶囊的对应属性上

具体代码如下





你可能感兴趣的:(前端问题总结,uni-app,前端,javascript)