微信小程序 -- ios 底部小黑条样式问题

问题:

如图,ios有的机型底部伪home键会显示在按钮之上,导致点击按钮的时候误触

解决:

  1. App.vue
javascript 复制代码
<script>
	export default {
				wx.getSystemInfo({
					success: res => {
						let bottomHeight = res.screenHeight - res.safeArea.bottom;
						uni.setStorageSync('bottomHeight', bottomHeight)
						console.log('小黑条高度', bottomHeight);
					},
					fail(err) {
						console.log(err);
					}
				})
		},
	}
</script>

<style>
	/*每个页面公共css */
	@import url("static/css/base.css");
</style>
  1. 有样式问题需要修改的页面

我这里写的是:如果不是有小黑条的机型(也就是bottomHeight===0的机型),那么我的paddingBottom设为10px;如果有的话,那么paddingBottom就设为小黑条的高度bottomHeight

javascript 复制代码
<template>
	<view @click="submit" :style="{paddingBottom:(bottomHeight===0?'10px':bottomHeight+'px')}">
		<view>
			提交
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bottomHeight:0, // 底部小黑条高度
			}
		},
		onLoad() {
			this.bottomHeight = uni.getStorageSync('bottomHeight')||0;
			console.log('底部小黑条高度',this.bottomHeight)
		},
		
	}
</script>

<style scoped lang="scss">
</style>

效果图

参考

vue动态添加style样式

【对象】

html :style="{ color: activeColor, fontSize: fontSize + 'px' }"

html :style="{color:(index==0?conFontColor:'#000')}"

【数组】

html :style="[baseStyles, overridingStyles]"
html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

【三目运算符】

html :style="{color:(index==0?conFontColor:'#000')}"
html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

【多重值】

此时,浏览器会根据运行支持情况进行选择

html :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"

【绑定data对象】

  • html :style="styleObject"
javascript 复制代码
data() {
    return{
      styleObject: {
        color: 'red',
        fontSize: '13px'
      }  
    }
}

原文:https://juejin.cn/post/6844903921509466120

小黑条适配

在移动端开发过程中,经常遇到iphone11、iphoneX底部小黑条遮挡页面底部,纯css实现设备的适配。详见我的上篇文章。

在开发微信小程序中,也会遇到iPhone全面屏手机,底部小黑条会遮挡页面底部,尽管微信小程序已经实现部分页面的适配,但个别页面仍旧需要做适配处理。

解决方案:使用wx.getSystemInfoSync()中的screenHeightsafeArea对象的bottom属性判断

  • screenHeight是获取屏幕的高度,因为bottom是以屏幕左上角为原点开始计算的,所以需要的是屏幕高度。

  • safeArea对象的bottom属性是安全区域右下角纵坐标。

  • screenHeight减去safeArea对象的bottom属性,则是底部小黑条的高度。

获取底部小黑条的高度,全局存储使用。

在全局app.js里,需要全局存储一个数据

javascript 复制代码
globalData: {
    bottomHeight:0
}

2.在全局app.js的onLaunch函数:

javascript 复制代码
wx.getSystemInfo({
  success: res => {
    this.globalData.bottomHeight = res.screenHeight - res.safeArea.bottom;
  },
  fail(err) {
    console.log(err);
  }
})

3.在所需页面的js文件从全局变量中获取

javascript 复制代码
onLoad: function (options) {
 
  this.setData({
    bottomHeight : app.globalData.bottomHeight 
  })
 
}

4.在所需页面的wxml里面使用:

javascript 复制代码
<view class="page" style="padding-bottom:{{bottomHeight }}px">

原文链接:https://blog.csdn.net/u014213847/article/details/129159964

未整理参考

相关推荐
程序员入门进阶6 小时前
基于微信小程序的电子购物系统的设计与实现(lw+演示+源码+运行)
微信小程序·小程序
程序员入门进阶6 小时前
智能社区服务小程序+ssm
小程序·apache
guanpinkeji7 小时前
搭子小程序定制开发:全新找搭子之旅
大数据·小程序·小程序开发·小程序制作·找搭子·搭子小程序
chusheng18407 小时前
Java基于小程序公考学习平台的设计与实现(附源码,文档)
java·学习·小程序·公考小程序·公考学习小程序
一 乐7 小时前
综合文化信息管理系统|基于java和小程序的综合文化信息管理系统设计与实现(源码+数据库+文档)
java·数据库·小程序·综合文化系统小程序
虞书欣的610 小时前
Python小游戏25——黄金矿工
开发语言·人工智能·游戏·小程序·pygame
我很苦涩的10 小时前
微信小程序使用uni cli框架绘制echarts图表
微信小程序·小程序·echarts
️ 邪神12 小时前
【Android、IOS、Flutter、鸿蒙、ReactNative 】文本点击事件
flutter·ios·鸿蒙·reactnative·anroid
慢慢雨夜13 小时前
uniapp发布到微信小程序,提示接口未配置在app.json文件中
微信小程序·小程序·uni-app
️ 邪神13 小时前
【Android、IOS、Flutter、鸿蒙、ReactNative 】文本Text显示
flutter·ios·鸿蒙·reactnative·anroid