uniapp小程序/H5内容区高度适配

最新推荐文章于 2024-08-06 10:10:57 发布

shinjie1210

最新推荐文章于 2024-08-06 10:10:57 发布

阅读量1.3k

点赞数

文章标签： javascript vue.js uni-app

本文链接：https://blog.csdn.net/shinjie1210/article/details/118767648

版权

本文介绍了如何在uni-app小程序和H5中进行内容区的高度适配，包括编写navbar区域、页面区的设置以及内容区高度的动态计算方法，使用了uni-app的nav-bar组件和getSystemInfo方法来实现。

摘要由CSDN通过智能技术生成

编写navbar区域

编写页面区

设置内容区高度

没什么复杂内容，简单记录下万一有人需要呢

编写navbar区域

利用模板组件首先写上一个nav-bar，component文件夹里写好引用就行，uni这里还是比较方便的，代码如下

<template>
	<view class="main">
		<uni-nav-bar fixed="true"  class="title">
			<view slot="default">
			<uni-search-bar placeholder="请输入内容" cancelButton="false"  focus class="searchline"></uni-search-bar>
			</view>
			<view slot="left"> 
			<uni-icons type="chat" size="30"></uni-icons>
			</view>
			<view slot="right">
			<uni-icons type="scan" size="30"></uni-icons>
				</view>
		</uni-nav-bar>
	</view>
</template>

<script>
	export default {
		name: "nav-bar",