news 2026/6/25 20:55:21

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
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>

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

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/20 2:11:42

PS学习基础笔记

第一节课一、 Ps&#xff1a;位图 Ai&#xff1a;矢量图 id&#xff1a;排版ctrlK:界面设置 二、 1、esc键 直接 进入 2、工具栏右击->显示工具 3、窗口->复位基本功能 4、新建画布&#xff1a;Ctrln 5、像素&#xff1a;一个个小格子&#xff0c;缩写px&#xff08;用在…

作者头像 李华
网站建设 2026/6/24 6:35:47

dpdk-testpmd在超过128核双numa场景启动失败问题

问题描述&#xff1a; dpdk-testpmd在超过128核双numa场景中&#xff0c;启动失败问题&#xff0c;问题日志如下&#xff0c;扫描内存的时候&#xff0c;无法使用numa1的内存。 ... EAL: Detected lcore 0 as core 0 on socket 0 EAL: Detected lcore 127 as core 215 on socke…

作者头像 李华
网站建设 2026/6/19 19:38:53

pdb设置内存参数

查看pdb设置的参数 set linesize 120 column pdb_name format a10 column name format a30 column value$ format a30select ps.db_uniq_name,ps.pdb_uid,p.name as pdb_name,ps.name,ps.value$ from pdb_spfile$ psjoin v$pdbs p on ps.pdb_uid p.con_uid order by 1, 2, …

作者头像 李华
网站建设 2026/6/21 4:13:59

索引的原理

一、索引的核心思想&#xff1a;空间换时间代价&#xff1a;索引需要占用额外的存储空间&#xff0c;并且会在数据增删改时引入额外的维护开销。收益&#xff1a;通过预先建立并维护一个更小的、针对性更强的数据结构&#xff0c;使得查询时能以远快于遍历全表的速度定位到目标…

作者头像 李华
网站建设 2026/6/18 6:04:23

基于大数据对B站热门视频的数据分析与数据研究系统(程序+文档+讲解)

课题介绍在 B 站内容生态精细化运营、创作者赋能需求下&#xff0c;传统热门视频分析存在 “维度单一、实时性差、规律挖掘不足” 的痛点&#xff0c;基于大数据技术构建的 B 站热门视频数据分析与研究系统&#xff0c;适配平台运营人员、UP 主、数据分析师等角色&#xff0c;整…

作者头像 李华
网站建设 2026/6/23 5:27:47

学长亲荐10个AI论文软件,助你轻松搞定本科毕业论文!

学长亲荐10个AI论文软件&#xff0c;助你轻松搞定本科毕业论文&#xff01; 论文写作的“隐形助手”&#xff0c;你真的了解吗&#xff1f; 在当今这个信息爆炸的时代&#xff0c;AI 工具已经成为许多本科生撰写毕业论文时不可或缺的帮手。无论是内容创作、逻辑梳理&#xff0c…

作者头像 李华