客户使用苹果手机,出现底部固定定位按钮看不见问题。是渲染了的,下拉的时候能看到有,正常页面上没有看见
解决封装成一个组件方便后续使用。
代码:

<template>
	<view class="my-fixed-container">
		<view ref="refNode" class="fixed-container" id="fixed-container" :style="fixedStyle">
			<slot></slot>
		</view>
		<view class="fill-container" :style="fillStyle"></view>
	</view>
</template>

<script setup name="MyFixedContainer">
	import {
		defineProps,
		computed,
		ref,
		onMounted,
		getCurrentInstance,
		watch,
		nextTick
	} from "vue"

	const refNode = ref(null)
	const height = ref(0)

	const props = defineProps({
		mode: {
			type: String,
			default: 'top',
			validator: (value) => {
				return ['top', 'bottom'].includes(value)
			}
		},
		// position: {
		// 	type: String,
		// 	default: 'absolute'
		// },
		zIndex: {
			type: Number,
			default: 100
		},
		background: {
			type: String,
			default: 'rgba(0,0,0,0)'
		},
		fill: {
			type: Boolean,
			default: true
		}
	})

	const fixedStyle = computed(() => {
		const styleParams = {
			[props.mode]: '0rpx',
			zIndex: props.zIndex,
			background: props.background,
			// position: props.position
		}
		return styleParams
	})

	const fillStyle = computed(() => {
		const styleParams = {
			height: height.value + 'px'
		}
		return styleParams
	})

	const computedHeight = () => {
		if (!props.fill) {
			height.value = 0
			return
		}
		nextTick(() => {
			const instance = getCurrentInstance()
			const query = uni.createSelectorQuery()
			query.select('#fixed-container').boundingClientRect((res) => {
				height.value = res.height
			}).exec()
		})
	}

	watch(
		() => props.fill,
		() => {
			computedHeight()
		}, {
			immediate: true
		}
	)
</script>

<style lang="scss">
	.my-fixed-container {
		width: 100%;
		overflow: hidden;

		.fixed-container {
			position: fixed;
			width: 100%;
			left: 0rpx;
		}

		.fill-container {
			position: relative;
			left: 100vw;
			top: 0;
		}
	}
</style>

使用:

	  <!-- 底部 -->
      <my-fixed-container mode="bottom">
        <Bottom :detailData="socialDetail" @contact="showContactUs = true" @toSocialConfig="toSocialConfig" />
      </my-fixed-container>

错误:往下划拉时能看到按钮出现
请添加图片描述

请添加图片描述

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐