合肥市网站建设_网站建设公司_网站备案_seo优化

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

<template><viewclass="my-fixed-container"><viewref="refNode"class="fixed-container"id="fixed-container":style="fixedStyle"><slot></slot></view><viewclass="fill-container":style="fillStyle"></view></view></template><scriptsetupname="MyFixedContainer">import{defineProps,computed,ref,onMounted,getCurrentInstance,watch,nextTick}from"vue"constrefNode=ref(null)constheight=ref(0)constprops=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}})constfixedStyle=computed(()=>{conststyleParams={[props.mode]:'0rpx',zIndex:props.zIndex,background:props.background,// position: props.position}returnstyleParams})constfillStyle=computed(()=>{conststyleParams={height:height.value+'px'}returnstyleParams})constcomputedHeight=()=>{if(!props.fill){height.value=0return}nextTick(()=>{constinstance=getCurrentInstance()constquery=uni.createSelectorQuery()query.select('#fixed-container').boundingClientRect((res)=>{height.value=res.height}).exec()})}watch(()=>props.fill,()=>{computedHeight()},{immediate:true})</script><stylelang="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-containermode="bottom"><Bottom:detailData="socialDetail"@contact="showContactUs = true"@toSocialConfig="toSocialConfig"/></my-fixed-container>

错误：往下划拉时能看到按钮出现