动态设置小程序IOS底部小黑条

创建setIOSAreaMixin.js文件

javascript 复制代码
import {
	mapState,
	mapMutations
} from 'vuex'

export default {
	computed: {
		...mapState("ios_area", ["globalAreaClass", 'isSafeAreaCalculated'])
	},
	mounted() {
		if (!this.isSafeAreaCalculated) {
			this.calculateSafeAreaClass();
			this.setSafeAreaCalculated(true)
		}
	},

	methods: {
		...mapMutations("ios_area", ["setSafeAreaCalculated", 'setGlobalClass']),
		calculateSafeAreaClass() {
			// 获取设备信息
			let result =  uni.getSystemInfoSync().osName
			// 判断设备类型
			if (result == 'ios' ) {
				// 计算安全区域类名
				
				const safeAreaClass = 'setIosArea'; // 根据你的需求定义类名
				// 更新 Vuex 中的数据

				this.setGlobalClass(safeAreaClass)
			} else {
				// 非iOS设备时清空类名

				this.setGlobalClass('')
			}
		},
	},
};import {
	mapState,
	mapMutations
} from 'vuex'

export default {
	computed: {
		...mapState("ios_area", ["globalAreaClass", 'isSafeAreaCalculated'])
	},
	mounted() {
		if (!this.isSafeAreaCalculated) {
			this.calculateSafeAreaClass();
			this.setSafeAreaCalculated(true)
		}
	},

	methods: {
		...mapMutations("ios_area", ["setSafeAreaCalculated", 'setGlobalClass']),
		calculateSafeAreaClass() {
			// 获取设备信息
			let result =  uni.getSystemInfoSync().osName
			// 判断设备类型
			if (result == 'ios' ) {
				// 计算安全区域类名
				
				const safeAreaClass = 'setIosArea'; // 根据你的需求定义类名
				// 更新 Vuex 中的数据

				this.setGlobalClass(safeAreaClass)
			} else {
				// 非iOS设备时清空类名

				this.setGlobalClass('')
			}
		},
	},
};

Vuex中存储

javascript 复制代码
export default {
	namespaced: true,
	state: {
		isSafeAreaCalculated: false,
		globalAreaClass: '',
	},
	mutations: {
		setSafeAreaCalculated(state, value) {
			state.isSafeAreaCalculated = value;
		},
		setGlobalClass(state, value) {
			state.globalAreaClass = value;
		},
	},
}

main.js中全局混入

javascript 复制代码
import setIOSAreaMixin from './mixin/setIOSAreaMixin'
Vue.mixin(setIOSAreaMixin);

页面中使用

html 复制代码
<view class="footer"  :class="globalAreaClass">
			<u-button type="warning" :custom-style="customStyle" hover-class="none" @click="chongZhi">确认充值</u-button>
		</view>

css

css 复制代码
.setIosArea {
		padding-bottom: calc(constant(safe-area-inset-bottom)/(1.5)) !important;
		padding-bottom: calc(env(safe-area-inset-bottom)/(1.5)) !important;

	}
相关推荐
敲代码的鱼哇1 小时前
跳转原生系统设置插件 支持安卓/iOS/鸿蒙UTS组件
android·ios·harmonyos
在下历飞雨2 小时前
Kuikly基础之状态管理与数据绑定:让“孤寡”计数器动起来
ios·harmonyos
在下历飞雨2 小时前
Kuikly基础之Kuikly DSL基础组件实战:构建青蛙主界面
ios·harmonyos
canglingyue3 小时前
微信小程序截屏与录屏功能详解
微信小程序·小程序
鹏多多.3 小时前
flutter-使用fluttertoast制作丰富的高颜值toast
android·前端·flutter·ios
微三云-轩4 小时前
区块链系统:解决549 亿元积分商城是否违法的问题
大数据·小程序·重构·区块链·生活
他们都不看好你,偏偏你最不争气6 小时前
【iOS】多界面传值
ios
D155540880586 小时前
电竞护航小程序成品搭建三角洲行动护航小程序开发俱乐部点单小程序成品游戏派单小程序定制
游戏·小程序
说私域16 小时前
兴趣电商内容数据洞察未来市场走向研究——基于开源AI智能名片链动2+1模式S2B2C商城小程序的实践
人工智能·小程序
wmsj057817 小时前
小程序图片批量保存太麻烦?用这款工具一键搞定,附工具教程!
小程序