企业官网建设流程全解析

东莞智通人才网官方网站,长春网站建设 找源晟,湛江市网站建设,网站性能优化方法客户使用苹果手机#xff0c;出现底部固定定位按钮看不见问题。是渲染了的#xff0c;下拉的时候能看到有#xff0c;正常页面上没有看见 解决封装成一个组件方便后续使用。 代码#xff1a; templateview classmy-fixed-containerview r…客户使用苹果手机出现底部固定定位按钮看不见问题。是渲染了的下拉的时候能看到有正常页面上没有看见解决封装成一个组件方便后续使用。代码templateviewclassmy-fixed-containerviewrefrefNodeclassfixed-containeridfixed-container:stylefixedStyleslot/slot/viewviewclassfill-container:stylefillStyle/view/view/templatescriptsetupnameMyFixedContainerimport{defineProps,computed,ref,onMounted,getCurrentInstance,watch,nextTick}fromvueconstrefNoderef(null)constheightref(0)constpropsdefineProps({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}})constfixedStylecomputed((){conststyleParams{[props.mode]:0rpx,zIndex:props.zIndex,background:props.background,// position: props.position}returnstyleParams})constfillStylecomputed((){conststyleParams{height:height.valuepx}returnstyleParams})constcomputedHeight(){if(!props.fill){height.value0return}nextTick((){constinstancegetCurrentInstance()constqueryuni.createSelectorQuery()query.select(#fixed-container).boundingClientRect((res){height.valueres.height}).exec()})}watch(()props.fill,(){computedHeight()},{immediate:true})/scriptstylelangscss.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-containermodebottomBottom:detailDatasocialDetailcontactshowContactUs truetoSocialConfigtoSocialConfig//my-fixed-container错误往下划拉时能看到按钮出现