<template>
<view>
<!-- 创建一个空元素 -->
<view :style="{height:top+'px'}">
</view>
<!-- 添加搜索框元素 -->
<view class="searchAll">
<uni-icons type="left" style="font-size: 20px;"></uni-icons>
<view class="search" :style="{height:pillheight+'px'}">
<uni-search-bar :radius="100" @confirm="search"></uni-search-bar>
</view>
</view>
</template>
简单看一下页面布局,最上方是一个空盒子,下面的盒子用来盛放搜索框以及图标
先从data里面设置一下默认的高度和宽度,然后使用uni.getSystemInfoSync的API获取顶部状态栏的高度
// 状态栏高度
capsuleHeight: 20,
navBarHeight: 45,
// 可视区域高度
windowWidth: 375,
// 胶囊高度
pillheight:0,
top: 0,
val: ''
uni.getMenuButtonBoundingClientRect获取胶囊的高度和顶部的距离,然后将搜索框的宽高和顶部的距离绑定到胶囊的对应属性上
具体代码如下
<template>
<view>
<!-- 创建一个空元素 -->
<view :style="{height:top+'px'}">
</view>
<!-- 添加搜索框元素 -->
<view class="searchAll">
<uni-icons type="left" style="font-size: 20px;"></uni-icons>
<view class="search" :style="{height:pillheight+'px'}">
<uni-search-bar :radius="100" @confirm="search"></uni-search-bar>
</view>
</view>
</template>
<script>
export default {
data(){
return {
// 状态栏高度
capsuleHeight: 20,
navBarHeight: 45,
// 可视区域高度
windowWidth: 375,
// 胶囊高度
pillheight:0,
top: 0,
val: ''
}
}
onLoad() {
const info = uni.getSystemInfoSync()
const a = uni.getMenuButtonBoundingClientRect()
this.top = a.top
// console.log(info);
console.log(a);
this.pillheight = a.height
this.capsuleHeight = info.statusBarHeight
console.log(this.capsuleHeight);
this.windowWidth = info.windowWidth
// #ifndef H5 || APP-PLUS || MP-ALIPAY
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
this.windowWidth = menuButtonInfo.left
// #endif
}
}
</script>
<style>
.searchAll {
margin-left: 16px;
display: flex;
justify-content: start;
.search {
margin-left: 16px;
text-align: center;
line-height: 100%;
width: 50%;
border: 1px solid #CCCCCC;
border-radius: 50px;
}
}
</style>