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

	}
相关推荐
mascon14 分钟前
U3D打包IOS的自我总结
ios
名字不要太长 像我这样就好19 分钟前
【iOS】继承链
macos·ios·cocoa
karshey1 小时前
【IOS webview】IOS13不支持svelte 样式嵌套
ios
潜龙95271 小时前
第4.3节 iOS App生成追溯关系
macos·ios·cocoa
游戏开发爱好者810 小时前
iOS App 电池消耗管理与优化 提升用户体验的完整指南
android·ios·小程序·https·uni-app·iphone·webview
_pengliang11 小时前
小程序按住说话
开发语言·javascript·小程序
万岳科技程序员小金13 小时前
多端协同的招聘系统源码开发指南:小程序+APP一体化设计
小程序·软件开发·app开发·招聘小程序·同城招聘系统源码·招聘app开发·招聘软件开发
xkxnq13 小时前
微信小程序地理定位功能
微信小程序·小程序
難釋懷14 小时前
微信小程序全局数据共享
微信小程序·小程序
阿眠16 小时前
vue3实现web端和小程序端个人签名
前端·小程序·apache