uni-app:踩坑路---scroll-view内使用fixed定位,无效的问题

前言:

        emmm,说起来这个问题整得还挺好笑的,本人在公司内,奋笔疾书写代码,愉快的提交测试的时候,测试跟我说,在苹果手机上你这个样式有bug,我倒是要看看,是什么bug。

安卓vs苹果

ok,我相信已经看出了差异了,安卓的遮罩层正常显示,而苹果的遮罩层只在我的绿色框内,被截断了,我赶忙看代码:

CustomItem.vue:自定义组件

蓝色的正方形,外加上一个遮罩层,点击蓝色方块的时候,显示遮罩层,遮罩层内写我的要展示的一些内容。

<template><view class=""><view class="item" @click="visible = true"></view><view class="mask" v-if="visible" @click="visible = false"></view></view>
</template><script>
export default {name: 'CustomItem',data() {return {visible: false};}
};
</script><style lang="scss" scoped>
.item {width: 100rpx;height: 100rpx;background-color: #00aaff;
}
.mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(#000, 0.5);
}
</style>

 父组件:引用CustomItem组件;

<template><view class="index"><scroll-view scroll-x class="scroll"><view class="list"><custom-item class="item" v-for="i in 10" :key="i"></custom-item></view></scroll-view></view>
</template><script>
import CustomItem from '@/components/CustomItem/index.vue';
export default {components: {CustomItem}
};
</script><style lang="scss" scoped>
.index {width: 100vw;height: 100vh;display: flex;align-items: center;justify-content: center;
}.scroll {width: 400rpx;height: 150rpx;background-color: #aaaa7f;
}
.list {padding: 20rpx;display: flex;align-items: center;.item {margin-right: 20rpx;}
}
</style>

如此:就造成了上面的结果,在ios上显示不正常;于是我立马进入百度啦,问心一言啦,通义千问啦,最后哈,在社区找到了这么一个帖子;帖子看这里。

emmm,寻求解决办法:

1.弃用scroll-view,改用view,使用css滚动;

<view class="list"><custom-item class="item" v-for="i in 10" :key="i"></custom-item>
</view><style lang="scss" scoped>
.list {width: 400rpx;height: 150rpx;background-color: #aaaa7f;padding: 20rpx;overflow-x: scroll;display: flex;align-items: center;.item {margin-right: 20rpx;}
}
</style>

2.如非必要,可以更改接口,其实上面的自定义组件CustomItem看着好像没有什么问题,是机型系统差异导致的,但是我们也并不能将全部原因归结于系统。 

当我们把它合起来看的话,就会发现在结构上似乎有一些问题了,遮罩层这一块的元素就需要循环10次,如果列表很长的话,那不就妥妥增加了很多的dom,浪费性能不说,结构设计也看着很怪, 所以有时候我们在封装组件的时候,不妨也这样考虑一下,可能这么写真的不太合适,最好的方案就是再划分下结构,只需要记得mask内的元素在放在scroll-view的外层即可!

<scroll-view scroll-x class="scroll"><view class="list"><view class="" v-for="i in 10" :key="i"><view class="item" @click="visible = true"></view><view class="mask" v-if="visible" @click="visible = false"></view></view></view>
</scroll-view>

 告辞!

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/47165.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vscode 远程 Ubuntu 系统

1、在 Ubuntu 下检查 sshd 守护进程是否开启 ps -aux | grep sshd如果没有开启&#xff0c;请在 Ubuntu 下输入指令安装 sudo apt-get install openssh-server2、首先打开 Windows 下的 vscode&#xff0c;点击左下角图标打开远程窗口 3、打开远程窗口&#xff0c;选择“Con…

【HZHY-AI300G智能盒试用连载体验】在华为IoTDA平台上建立设备

目录 华为IoTDA平台 注册IoTDA实例 创建产品 添加设备 本文首发于&#xff1a;【HZHY-AI300G智能盒试用连载体验】 智能工业互联网网关 - 北京合众恒跃科技有限公司 - 电子技术论坛 - 广受欢迎的专业电子论坛! 在上一篇博文中介绍了如何在HZHY-AI300G智能盒创建南向设备&a…

前端特效动画魔法书:文字渐入效果实现,可做引导页面

前端特效动画魔法书&#xff1a;文字渐入效果实现&#xff0c;可做引导页面 简介 在网页设计的世界中&#xff0c;动画是吸引用户眼球的魔法。Anime.js&#xff0c;一个轻量级且功能强大的JavaScript动画库&#xff0c;是实现这一魔法的完美工具。本文将作为你的技术文档&…

【3D编程技巧】如何用四元数旋转矢量在相机空间进行光照计算

这里介绍一个小TIPS&#xff0c;很久没有这么有成就感了。我以前在学3D数学的时候&#xff0c;书上就有一句话&#xff0c;说你把矢量这些东西用久了&#xff0c;就应该形成一种“直觉”&#xff0c;仿佛这些东西就是你的左右手一样。而这次&#xff0c;我居然真的用“直觉”来…

【开源库学习】libodb库学习(三)

4 查询数据库 如果我们不知道我们正在寻找的对象的标识符&#xff0c;我们可以使用查询在数据库中搜索符合特定条件的对象。ODB查询功能是可选的&#xff0c;我们需要使用--generate-query ODB编译器选项显式请求生成必要的数据库支持代码。 ODB提供了一个灵活的查询API&#x…

复现Android中GridView的bug并解决

几年前的一个bug&#xff0c;GridView的item高度不一致。如下图&#xff1a; 复现bug的代码&#xff1a; import android.os.Bundle; import android.widget.BaseAdapter; import android.widget.GridView; import androidx.appcompat.app.AppCompatActivity; import java.uti…

麻省理工学院 - MIT - 线性代数学习笔记

学习视频地址 文章目录 1.01方程组的几何解释2.02矩阵消元3.03乘法和逆矩阵乘法逆 4.04矩阵A的LU分解5.05转置&#xff0c;置换&#xff0c;向量空间置换转置向量空间 6.06列空间和零空间7.07求解Ax0&#xff1a;主变量&#xff0c;特解 1.01方程组的几何解释 对于二元方程组&…

Scratch自制:《袁坤》游戏攻略

大家好&#xff01;我也是很久没有动静了&#xff0c;这次我又来了&#xff0c;并且还带来了一个用Scratch制作的游戏&#xff0c;大家还记得我很久以前用C制作的《袁坤》吗&#xff1f;&#xff08;详见C自制游戏《袁坤》1.2版本发布&#xff01;-CSDN博客&#xff09;这次它又…

种类并查集

最近玩的太嗨了&#xff0c;都忘了自己还有三篇博客还在拖更&#xff0c;也是今天一更到底好吧&#xff0c;边更新边写题&#xff0c;让看官老爷有更多的样题去联系 引入—— 在学这个之前&#xff0c;我相信各位应该已经接触过了并查集了吧&#xff0c;嗯&#xff1f;什么&a…

Kubernetes 1.24 版弃用 Dockershim 后如何迁移到 containerd 和 CRI-O

在本系列的上一篇文章中&#xff0c;我们讨论了什么是 CRI 和 OCI&#xff0c;Docker、containerd、CRI-O 之间的区别以及它们的架构等。最近&#xff0c;我们得知 Docker 即将从 kubernetes 中弃用&#xff01;&#xff08;查看 kubernetes 官方的这篇文章&#xff09;那么让我…

VSCODE 下 openocd Jlink 的配置笔记

title: VSCODE 下 openocd Jlink 的配置笔记 tags: STM32HalCubemax 文章目录 内容VSCODE 下 openocd Jlink 的配置笔记安装完成后修改jlink的配置文件然后修改你的下载器为jlink烧录你的项目绝对会出现下面的问题那么打开下载的第一个软件 &#xff08;点到这个jlink右键&…

Kafka架构详解之分区Partition

目录 一、简介二、架构三、分区Partition1.分区概念2.Offsets&#xff08;偏移量&#xff09;和消息的顺序3.分区如何为Kafka提供扩展能力4.producer写入策略5.consumer消费机制 一、简介 Apache Kafka 是分布式发布 - 订阅消息系统&#xff0c;在 kafka 官网上对 kafka 的定义…

【11】微服务链路追踪SkyWalking

1、skywalking是什么 1.1 链路追踪介绍 对于一个大型的几十个、几百个微服务构成的微服务架构系统&#xff0c;通常会遇到下面一些问题&#xff0c;比如&#xff1a; 如何串联整个调用链路&#xff0c;快速定位问题&#xff1f;如何缕清各个微服务之间的依赖关系&#xff1f;…

【AI学习】LLaMA 系列模型的进化(二)

在前面LLaMA 系列模型的进化&#xff08;一&#xff09;中学习了LLama模型的总体进化发展&#xff0c;再来看看其中涉及的一些重要技术。 PreLayerNorm Layer Norm有Pre-LN和Post-LN两种。Layer Normalization&#xff08;LN&#xff09;在Transformer架构中的放置位置对模型…

基于PaddleOCR + NLP实现证件识别

基于PaddleOCR NLP实现证件识别 PaddleOCR识别paddleOCR安装安装 anconda虚拟环境(可参考yolov5的安装教程) paddleOCR识别PaddleNLP模型信息抽取paddle打包exe 进行ocr识别 什么是PaddleOCR&#xff1f; PaddleOCR 旨在打造一套丰富、领先、且实用的 OCR 工具库&#xff0c;助…

【HarmonyOS开发】Navigation使用

简介 Navigation是路由容器组件&#xff0c;包括单栏(Stack)、分栏(Split)和自适应(Auto)三种显示模式。适用于模块内和跨模块的路由切换。 在页面跳转时&#xff0c;应该使用页面路由router&#xff0c;在页面内的页面跳转时&#xff0c;建议使用Navigation达到更好的转场动效…

Spring Boot集成Spring Batch快速入门Demo

1.什么是Spring Batch&#xff1f; Spring Batch 是一个轻量级的开源框架&#xff0c;它提供了一种简单的方式来处理大量的数据。它基于Spring框架&#xff0c;提供了一套批处理框架&#xff0c;可以处理各种类型的批处理任务&#xff0c;如ETL、数据导入/导出、报表生成等。S…

Armv8/Armv9架构的学习大纲-学习方法-自学路线-付费学习路线

本文给大家列出了Arm架构的学习大纲、学习方法、自学路线、付费学习路线。有兴趣的可以关注&#xff0c;希望对您有帮助。 如果大家有需要的&#xff0c;欢迎关注我的CSDN课程&#xff1a;https://edu.csdn.net/lecturer/6964 ARM 64位架构介绍 ARM 64位架构介绍 ARM架构概况…

uniapp,vue3上传图片组件封装

首先创建一个 components 文件在里面进行组件的创建 下面是 vip组件的封装 也就是图片上传组件 只是我的命名是随便起的 <template><!--图片 --><view class"up-page"><!--图片--><view class"show-box" v-for"(item,ind…

蓝桥杯Python算法竞赛常用的函数库

博客主页&#xff1a;音符犹如代码系列专栏&#xff1a;Python关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ ​ 目录 math collectcions heapq functool itertools 常用的库函数 m…