【小程序】uni-app自定义导航栏适配小程序，对齐胶囊-Toy模板网

这篇具有很好参考价值的文章主要介绍了【小程序】uni-app自定义导航栏适配小程序，对齐胶囊。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

自定义导航栏对齐胶囊按钮，实现方法是通过获取胶囊按钮的顶部（top）高度和自身高度（height），动态设置导航栏的样式（style）。

通过uni.getMenuButtonBoundingClientRect()，可以获取胶囊按钮的布局位置信息，包括width、height、top、bottom、left、right。

1、定义变量

export default {
    data() {
  	    return {
            searchBarTop: 0,   //搜索栏的外边框高度，单位px
			searchBarHeight: 0,  //搜索栏的高度，单位px
		}
	}
}

2、获取胶囊按钮的布局位置信息

onLoad(){
    let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
    this.searchBarTop = menuButtonInfo.top;
    this.searchBarHeight = menuButtonInfo.height;
}

3、绑定搜索栏的style

<view 
    class="search-bar-container" 
    :style="{marginTop:searchBarTop + 'px',height:searchBarHeight + 'px'}">
</view>

完整代码文章来源地址https://www.toymoban.com/news/detail-538290.html

<template>   
     <view 
        class="search-bar-container" 
        :style="{marginTop:searchBarTop + 'px',height:searchBarHeight + 'px'}">
    </view>
</template>

<script>
	export default {
		data() {
			return {
                searchBarTop: 0,   //搜索栏的外边框高度，单位px
			    searchBarHeight: 0,  //搜索栏的高度，单位px
			}
		},
        onLoad(){
            let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
            this.searchBarTop = menuButtonInfo.top;
            this.searchBarHeight = menuButtonInfo.height;
        }
    }
</script>

到了这里，关于【小程序】uni-app自定义导航栏适配小程序，对齐胶囊的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！