uniapp小程序自定义tabbar适配个别手机底部塌陷问题

news/2024/7/20 3:33:19 标签: 微信, 小程序, javascript

塌陷场景:

此处已塌陷

解决方法:

// 适配手机底部塌陷问题
padding-bottom: env(safe-area-inset-bottom);

完整css代码:

.tabbars {
		position: fixed;
		z-index: 99;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
        box-shadow: 0 0 6rpx rgba(0, 0, 0, .2);
		font-size: 24rpx;
		background-color: #fff;
		padding: 10rpx 0;
		// 适配手机底部塌陷问题
		padding-bottom: env(safe-area-inset-bottom);
}

适配效果图:

 


http://www.niftyadmin.cn/n/903016.html

相关文章

uni-app微信小程序封装全局判断是否登录方法结合全局变量

新建的uni-app项目会有个app.vue文件&#xff0c;在此文件下 onLaunch应用生命周期封装一个方法(把全局变量定义一下): 注意&#xff1a;onLaunch应用生命周期只会触发一次 app.vue&#xff1a; <script>export default {//全局变量globalData: {//用于判断用户是否登录…

在vue里面写一个js防抖函数(节流函数)

一般用于防止用户暴力点击&#xff0c;导致多次请求接口&#xff0c;效果是在一定时间内点击多次后只触发一次 methods: { //防抖函数(节流函数)trans: (function() {let timer null;return function() {clearTimeout(timer);timer setTimeout(() > {//处理业务逻辑conso…

uni-app微信小程序封装一个request请求接口

在uniapp项目根目录里面新建一个文件 utils: 再新建一个api.js: //你的请求地址(线上或线下) const BASE_URL https://www.baidu.com/ export const http (options) > {return new Promise((resolve, reject) > {uni.request({url: BASE_URL options.url,method: opt…

uniapp微信小程序搜索关键词在列表中高亮效果

先看效果图: 直接上代码: view片段: <view class"text" click"gsClick(item,index)" v-for"(item,index) in searchList" :key"index"><rich-text :nodes"item.companyName"></rich-text> </view&g…

javascript class类基础用法-01

//俗话说的好&#xff0c;用了js的class类之后&#xff0c;万物皆可new一个对象&#xff0c;我忘了new多少个对象了//创建一个类函数class UserInfo {//公共myName字段myName my name is 奥利给;//私有实例字段(只有在UserInfo主体里调用该字段,别处调用会报错)//前面加上#号就…

css让页面整体呈现灰色调

效果图: body {filter: grayscale(100%); -webkit-filter: grayscale(100%); //兼容chrome和safari和2013年后Opera-moz-filter: grayscale(100%); //兼容Firefox-ms-filter: grayscale(100%); //兼容IE、Edge-o-filter: grayscale(100%); //兼容2013年前的…

model-viewer(模型观察者),可用于查看 Web 上的 3D 模型并与之交互

我做的Demo链接(pc或手机都可以看): 模型观察者model-viewer 码云demo地址: javascriptWeb3D: 模型观察者-model-viewer Demo 手机PC效果图: 去参考文档: <model-viewer> Augmented Reality <!DOCTYPE html> <html lang"en"> <head><m…

微信小程序添加插件

先登录微信公众平台进入小程序管理后台(如图): 滚到底部点击设置: 再点击第三方设置: 点击插件管理右边的添加插件按钮: 选中添加即可添加完成&#xff0c;最后查看添加插件的详情&#xff0c;把插件代码复制到小程序开发工具或者Hbuild小程序里