当前位置: 首页 > news >正文

uniapp开发微信公众号使用fixed固定定位,苹果手机出现内容不显示问题

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

<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>

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

http://www.gsyq.cn/news/153918.html

相关文章:

  • 英伟达与AI芯片竞争对手Groq达成授权协议并聘用其CEO
  • 需求接口人与研发接口人的职责分别是什么
  • 英国AI公司Nscale斥资8.65亿美元加码美国数据中心布局
  • Vite 在项目中的使用分析
  • 2025机械密封厂家综合实力排名TOP5:产能、专利、质量三维度权威解析 - 爱采购寻源宝典
  • 创新项目的立项与评审机制如何设计
  • 简述内存映射
  • Day11 二分查找 -代码随想录 数组
  • 英伟达斥资200亿美元许可芯片初创公司Groq技术
  • 【计算机毕业设计案例】基于springboot旅游门票信息系统设计与实现基于springboot的旅游网站系统的设计与实现(程序+文档+讲解+定制)
  • 麦多福生鲜超市库存管理信息系统sb+v
  • 通信协议仿真:5G NR协议仿真_(5).5G NR仿真工具与平台
  • 美食推荐SpringBoot
  • 【课程设计/毕业设计】基于springboot的旅游网站系统的设计与实现基于springboot的旅游管理系统,在线旅游管理系统【附源码、数据库、万字文档】
  • 2025开顶集装箱厂家综合实力排名TOP5(产能+专利+服务三维度对比) - 爱采购寻源宝典
  • 常见端口的用途
  • 【弹簧阻尼器】无摩擦弹簧质量阻尼器系统稳态振动振幅比的三维曲面图研究附Matlab代码
  • AI搜索优化专业公司推荐,南方网通实力护航 - 工业设备
  • 2025勾花网厂家推荐排行榜:安平特迪产能领先,沃达专利优势突出 - 爱采购寻源宝典
  • Java毕设选题推荐:基于springboot的旅游网站系统的设计与实现基于springboot的旅游管理系统,在线旅游管理系统【附源码、mysql、文档、调试+代码讲解+全bao等】
  • 2025 法兰球阀 厂家推荐排行榜:从产能到专利的权威解析 - 爱采购寻源宝典
  • 【弹簧阻尼器】基于卡尔曼滤波弹簧质量阻尼器系统噪声测量实时状态估计研究附Matlab代码
  • C 语言字符串函数超全解析
  • 2025铜芯电缆厂家推荐排行榜:从产能到专利的权威实力比拼 - 爱采购寻源宝典
  • Windows系统文件vbscript.dll丢失损坏问题 下载修复
  • Windows系统文件usercpl.dll丢失损坏问题 下载修复
  • 免费SSL证书申请自动验证:DNS解析代理
  • VAN.dll文件缺失找不到损坏问题 免费下载方法
  • [特殊字符] 一文看懂:Android 系统中如何“默认开启/关闭 USB 调试”?
  • 基于Uniapp的派出所业务管理系统微信小程序(程序+文档+讲解)