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

	}
相关推荐
2301_8059629324 分钟前
微信小程序控制空调之微信小程序篇
微信小程序·小程序
Daniel_Coder1 小时前
iOS Widget 开发-7:TimelineProvider 机制全解析:构建未来时间线
ios·swift·widget
Daniel_Coder2 小时前
iOS Widget 开发-3:Widget 的种类与尺寸(主屏、锁屏、灵动岛)
ios·swift·widget
Ama_tor6 小时前
mini-program01の系统认识微信小程序开发
微信小程序·小程序
一只一只妖17 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
Engandend18 小时前
Flutter与iOS混合开发交互
flutter·ios·程序员
编程毕设19 小时前
基于小程序的智能停车管理系统设计与开发
小程序
Kelaru20 小时前
本地Qwen中医问诊小程序系统开发
python·ai·小程序·flask·project
山水域20 小时前
GoogleAdsOnDeviceConversion 库的作用与用法
ios