需求:uniapp框架开发中 自定义搜索栏编译微信小程序与适配与其右边胶囊袋对齐!要实现自定义导航栏与胶囊对齐,如下图如示,只需要获取导航栏高度,及导航栏距上的位置(其实就是状态栏高度),再通过css布局就完成任务了。这个方案应该是最简单易懂的方案了。如果有更复杂的布局需要,都以导航容器为基准去扩展就行了。
视图:
<template>
<view class="navTab">
<view class="navTabFixed">
<view :style="{height:capsuleHeight+'px'}"></view>
<view class="navTabContent" :style="{height:navBarHeight+'px',width:windowWidth+'px'}">
<view class="navTabSearch">
<view class="navTabSearchIcon">
<uni-icons type="search" size="16" color="#999"></uni-icons>
</view>
<view class="navTabSerach">
<input class="navTabSearchText" type="text" v-model="val" placeholder="搜索您想要的好物" />
</view>
</view>
</view>
</view>
<view :style="{height: capsuleHeight+navBarHeight+'px'}"></view>
</view>
</template>
画一个动态胶囊视图,动态获取胶囊高度进行赋值占位!
逻辑:
<script>
export default {
name: 'navTab',
data() {
return {
capsuleHeight: 20,
navBarHeight: 45,
windowWidth: 375,
val: ''
}
},
onLoad(options) {
const info = uni.getSystemInfoSync()
this.capsuleHeight = info.capsuleHeight
this.windowWidth = info.windowWidth
// #ifndef H5 || APP-PLUS || MP-ALIPAY
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
this.navBarHeight = (menuButtonInfo.bottom - info.capsuleHeight) + (menuButtonInfo.top - info.capsuleHeight)
this.windowWidth = menuButtonInfo.left
// #endif
},
methods: {
}
}
</script>
一般来说自定义导航栏是要固定在页面最上面的,所以得有个占位元素来占距位置,不然下面的内容就会被导航栏遮住。所以固定的导航栏外面应该再加个正常容器元素,高度 = 导航栏高度 + 距上。
样式:
<style lang="less" scoped>
.navTab {
.navTabFixed {
position: fixed;
top: 0;
left: 0;
z-index: 99;
width: 100%;
background-color: @mk-base-color;
.navTabContent {
display: flex;
justify-content: center;
align-items: center;
padding: 0 30Upx;
height: 90Upx;
box-sizing: border-box;
.navTabSearch {
display: flex;
align-items: center;
padding: 0 20Upx;
width: 100%;
height: 60Upx;
border-radius: 60Upx;
background-color: #fff;
.navTabSearchIcon {
margin-right: 20Upx;
}
.navTabSearchText {
width: 100%;
font-size: 28Upx;
color: #999;
}
}
&.search {
padding-left: 0;
.navTabContent__search-icons {
margin-left: 20Upx;
margin-right: 20Upx;
}
.navTabSearch {
border-radius: 10Upx;
}
}
}
}
}
</style>