动态设置小程序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;

	}
相关推荐
说私域36 分钟前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
瓜子三百克2 小时前
CALayer的异步处理
macos·ios·cocoa
吴Wu涛涛涛涛涛Tao2 小时前
一步到位:用 Very Good CLI × Bloc × go_router 打好 Flutter 工程地基
flutter·ios
一渊之隔3 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
杂雾无尘5 小时前
开发者必看:如何在 iOS 应用中完美实现动态自定义字体!
ios·swift·apple
kymjs张涛7 小时前
零一开源|前沿技术周报 #6
前端·ios·harmonyos
racerun7 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-54587 小时前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
与火星的孩子对话1 天前
Unity进阶课程【六】Android、ios、Pad 终端设备打包局域网IP调试、USB调试、性能检测、控制台打印日志等、C#
android·unity·ios·c#·ip
HERR_QQ1 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序