当前位置: 首页 > 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.jsqmd.com/news/139792/

相关文章:

  • 靠谱且性价比高的 AI 搜索优化公司推荐 - 工业品网
  • agc011_e 题解
  • 开箱 NVIDIA DGX Spark:iPad mini尺寸实现千万亿次算力
  • 有实力的AI搜索优化品牌企业,为您的业务赋能 - 工业设备
  • 服装批发市场新浪潮:数字化时代的采购决策与优选指南 - 速递信息
  • 推荐靠谱AI搜索优化企业,南方网通实力出众 - 工业设备
  • 高性价比AI搜索优化公司推荐:南方网通信誉卓越 - 工业设备
  • AI编程智能体工作原理及使用注意事项
  • 详细分析Java8中的CompletableFuture异步编程类(附Demo)
  • 简述内存映射
  • 2025必备10个降aigc工具,继续教育学生必看
  • 英伟达与AI芯片竞争对手Groq达成授权协议并聘用其CEO
  • web worker使用总结(包含多个worker)
  • CSAPP-虚拟内存学习总结
  • 2025国内最新风管厂家 TOP5 评测!服务于广东广州湖南等地优质品牌榜单发布!好品牌赋能工业通风生态 - 全局中转站
  • 2025产后宝妈代餐避坑指南:如何选?科学控卡+营养护乳效果权威实测 - 速递信息
  • ①搭建vimo-desktop本地运行环境
  • 需求接口人与研发接口人的职责分别是什么
  • Vite 在项目中的使用分析
  • 2025国内最新通风管厂家 TOP5 评测!服务于广州广东湖南等地优质品牌权威榜单发布,优质公司赋能重构工业通风生态 - 全局中转站
  • 广州体育培训基地推荐:效率提升80%的训练营凭啥火 - 品牌测评家
  • 人事行政述职 PPT 工具测评,适合中大型公司吗?
  • 英伟达斥资200亿美元许可芯片初创公司Groq技术
  • 【计算机毕业设计案例】基于springboot旅游门票信息系统设计与实现基于springboot的旅游网站系统的设计与实现(程序+文档+讲解+定制)
  • ROS2核心概念理清:功能包、可执行文件与节点的关系详解
  • 2025 电缆线 厂家推荐排行榜:从产能到专利实力大比拼 - 爱采购寻源宝典
  • 麦多福生鲜超市库存管理信息系统sb+v
  • 通信协议仿真:5G NR协议仿真_(5).5G NR仿真工具与平台
  • 基于开源AI智能名片链动2+1模式S2B2C商城小程序源码的实体店私域运营策略研究
  • 广州体育培训基地排名:用户增长300%的黑马机构上榜 - 品牌测评家