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

	}
相关推荐
DisonTangor28 分钟前
苹果发布iOS 18.2首个公测版:Siri接入ChatGPT、iPhone 16拍照按钮有用了
ios·chatgpt·iphone
- 羊羊不超越 -31 分钟前
App渠道来源追踪方案全面分析(iOS/Android/鸿蒙)
android·ios·harmonyos
丁总学Java4 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
说私域6 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen8686 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq22951165026 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦13 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
2401_8658548816 小时前
iOS应用想要下载到手机上只能苹果签名吗?
后端·ios·iphone
paopaokaka_luck18 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie23420 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app