UNI-APP_nvue踩坑

踩坑1

1.nvue里面的样式不可以用预编译语言,只能用css;
2.不能随心所欲地使用选择器,nvue只支持单类选择器(不可以使用交集选择器和后代选择器,但可以使用并集选择器);
3.div是容器,里面不能直接写字,要在里面写上text

其他:

1.nvue支持行高line-height,但是不支持纯数字的行高(表示行高是字体大小的多少倍),只支持带单位的长度。(我就特别喜欢用数字做为行高,结果打开页面我一脸懵逼,文字只能看见一条线,改成具体的高度后就正常了)

2.nvue不支持box-sizing的设置。(我之前很喜欢用padding撑开距离,因为box-siziing默认是content-box,用padding可以撑开距离,结果nvue的box-siziing是border-box而且无法修改,给图片加上padding会让图片变形)

3.nvue里的fixed定位的元素不受z-index的影响,层级完全由先来后到决定,写在后面的元素层级永远比写在前面的高。

4.nvue里,如果需要用bottom来定位,怎么办?我知道定位的四个偏移量里,top优先级高于bottom,left高于right。在浏览器中,只想用bottom来定位,不想用top,直接用bottom没问题,在nvue里我就碰壁了。解决方法是:先把优先级高的top“解决掉”,才能用bottom——在样式里,写上top:auto;然后对bottom的设置才会生效。left和right也是同理。

5.nvue要怎么控制文字的换行?CSS里有white-space控制换行,然而nvue不支持。如果想让文字不换行,可以设置lines属性为1(默认为0表示没有限制多少行)

6.uni-app的为vue文件提供了更多的生命周期,nvue文件却没有。比如onLoad就没有,如果要做初始化的工作,可以写在mounted生命周期钩子里去。

踩坑2

1.关于图片圆角。

因为我做的页面上面有出现用户头像,是圆形的,需要做成图片圆角。看了一些别人的博客,他们说是在“外层的父容器

的样式上加上圆角,然后用overflow来切掉它,让图片变圆”可是我尝试了以后发现并没有成功。

然后,我把关注点从

上挪开,改成在上加上border-radius,就成功了,写成50%和带单位的长度都是有效的!

2.关于显示隐藏。

nvue必须用flex布局,我认为原因是它里面的display值为flex,而且不可以改成标准流的block等,也就是不支持修改display。

v-show的显示隐藏就是靠display:none;和 display: block;很显然v-show在nvue里会失效。而v-if是把整个元素删掉和插入了,是可以做到显示隐藏的,但是我认为对于弹窗来说,需要频繁切换显示隐藏,v-if用在这里不合适。所以,必须找一个不借助display:none;的隐藏方法,而且隐藏后不能占空间(不能被误点到),也不能频繁插入和删除元素。

所以不能用插入删除元素的v-if,不能用作为障眼法的transform: scale(0),opacity: 0;也不可能用仍然占空间的visibility:hidden;(我试用了下,发现在nvue里这个没有生效)。我想到了用宽度或高度为0的办法。

具体来说,对于宽度固定的元素,如蒙板是全屏的,宽度肯定是750rpx,或者某个弹窗高度不确定,但宽度为500rpx,这个时候可以给默认样式写成width:0;然后根据条件判断,要显示的时候加上另一个叫“show”的calss,在“show”里面写上正常的宽度。这样,这个元素一直存在于页面,是否可见完全取决于有没有加上show这个class。

反之,有的元素高度是固定的,或者和后面的元素上下相连,不希望隐藏的时候保留高度,就可以做成默认height:0;,在“show”的class里写上具体的高度。

如果不给widh和height设置固定的宽度和高度,则它们的实际大小是由内容撑大的。但是很遗憾,我发现给“show”里面设置width或height为auto;并没有效果。所以只能退而求其次,在确定是固定的大小的那一方进行这样切换。如果width和height都设为0,还能看见元素的一小部分,那不是因为有的东西无法隐藏,而是因为padding撑起了这一小块的空间。

3.一个小细节。

我想让点击内层元素,事件不冒泡,但又暂时不知道内层元素点击了要做些什么事情,就写成了@tap.stop,后面没有绑定事件函数,我记得这样也是可以的。结果出现了非常莫名其妙的错误,value.trim is not a function。我根本就没有写到trim。百度了一堆,错误原因五花八门,我通过排除法才找到这里的。问题应该是我没有绑定函数,我最后是绑定了一个空函数到这里。

4.关于flex的小细节。

我发现给内层的元素设置宽度和高度的时候,用百分比无效,用带单位的数字可以。

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

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

相关文章

YOLO V1学习笔记

为什么要学YOLOV1_哔哩哔哩_bilibili 这个视频讲解的很好,建议在看这个之前看看卷积神经网络,会对卷积后的结果理解更加深刻一点。 一 背景 目标检测分为单阶段和两阶段模型。 之前的目标检测DPM、R-CNN、Fast-RCNN、Faster-RCNN都是双阶段模型&…

ElasticSearch集群架构实战及其原理剖析

ES集群架构 为什么要使用ES集群架构 分布式系统的可用性与扩展性: 高可用性 服务可用性:允许有节点停止服务;数据可用性:部分节点丢失,不会丢失数据; 可扩展性 请求量提升/数据的不断增长(将数据分布…

用android studio调试react native中的原生代码(windows+android)

要用Android Studio调试React Native原生代码, 1. 需要先在终端中运行react-native start命令启动React Native服务器。 2. 然后,在Android Studio中打开你的React Native项目(\android\build.gradle),连接你的设备或…

Salesforce创建一个页面,能够配置各种提示语,而不需要修改代码

在Salesforce中创建一个页面,并使其能够配置各种提示语,可以使用自定义设置、自定义对象或自定义标签等方法来实现。以下是一种常见的方法: 自定义对象或自定义设置:您可以创建一个自定义对象或自定义设置来存储各种提示语的信息。…

[极客大挑战 2019]LoveSQL 1

题目环境:判断注入类型是否为数字型注入 admin 1 回显结果 否 是否为字符型注入 admin 1 回显结果 是 判断注入手法类型 使用堆叠注入 采用密码参数进行注入 爆数据库1; show database();#回显结果 这里猜测注入语句某字段被过滤,或者是’;被过滤导致不能…

linux jdk配置

1.下载jdk ,以jdk1.8为例子 Java Downloads | Oracle JDK 8 Update Release Notes (oracle.com) 2.配置环境变量 1.下载相关jdk版本,执行以下命令安装jdk tar -zxvf jdk-8u144-linux-x64.tar.gz 2.编辑命令 vi /etc/profile 3.在最后加入下面配置 e…

硬件测试(二):波形质量

一、信号质量测试 信号在传输的过程中,一般不是标准的矩形波信号,信号质量测试即通过示波器测试单板硬件的数字信号和模拟信号的各项指标,包括电源、时钟、复位、CPU小系统、外部接口(USB、网口、串口)、逻辑芯片(CPLD…

【C++】异常【完整版】

目录 1.C语言传统的处理错误的方式 2. C异常概念 3. 异常的使用 3.1 异常的抛出和捕获 3.2 异常的重新抛出 3.3异常安全 3.4 异常规范 4.自定义异常体系 5.C标准库的异常体系 6.异常的优缺点 1.C语言传统的处理错误的方式 传统的错误处理机制: 1. 终止程序…

acwing算法基础之数据结构--trie算法

目录 1 基础知识2 模板3 工程化 1 基础知识 trie树算法,也叫作字典树算法。 用处:用来高效存储和查找字符串集合的数据结构。 (一) 定义变量。 const int N 1e5 10; int son[N][26], cnt[N], idx; char str[N];(二…

(论文阅读13/100)R-CNN minus R

文献阅读笔记 简介 题目 R-CNN minus R 作者 Karel Lenc Andrea Vedaldi 原文链接 https://arxiv.org/pdf/1506.06981.pdf 关键词 Null 研究问题 proposal generation在基于CNN的探测器中的作用,以确定它是否是一个必要的建模组件。 R-CNN留下的几个有趣…

“1-5-15”原则:中国联通数字化监控平台可观测稳定性保障实践

一分钟精华速览 “只知道系统有问题,但是找不到问题到底出在哪里”,这几乎是大家都面临过、或正在面临的问题。用户在投诉,但是我的指标都是正常的,到底是哪一环出问题了? 本文详细介绍了中国联通在智能运维领域的应用…

Asterisk Ubuntu 安装

更新环境 sudo apt update sudo apt install wget build-essential git autoconf subversion pkg-config libtool sudo contrib/scripts/get_mp3_source.sh A addons/mp3 A addons/mp3/common.c A addons/mp3/huffman.h A addons/mp3/tabinit.c A addons/mp3/Ma…

3D医学三维技术影像PACS系统源码

一、系统概述 3D医学影像PACS系统,它集影像存储服务器、影像诊断工作站及RIS报告系统于一身,主要有图像处理模块、影像数据管理模块、RIS报告模块、光盘存档模块、DICOM通讯模块、胶片打印输出等模块组成, 具有完善的影像数据库管理功能,强大…

Leetcode76最小覆盖子串

思路:滑动窗口思想 1. 滑动窗口是什么:用一个滑动窗口为覆盖目标子串的字符串 2.怎么移动窗口:当不满足覆盖时右指针移动扩大范围,当覆盖了就移动左指针缩减范围直到再次不覆盖 3. 怎么判断是否覆盖:这里使用两个哈…

接口自动化测试难点:数据库验证解决方案 百分之90人不知道

接口自动化中的数据库验证:确保数据的一致性和准确性 接口自动化测试是现代软件开发中不可或缺的一环,而数据库验证则是确保接口返回数据与数据库中的数据一致性的重要步骤。本文将介绍接口自动化中的数据库验证的原理、步骤以及示例代码,帮…

Flutter 06 动画

一、动画基本原理以及Flutter动画简介 1、动画原理: 在任何系统的Ul框架中,动画实现的原理都是相同的,即:在一段时间内,快速地多次改变Ul外观;由于人眼会产生视觉暂留,所以最终看到的就是一个…

CCS3列表和超链接样式

在默认状态下,超链接文本显示为蓝色、下画线效果,当鼠标指针移过超链接时显示为手形,访问过的超链接文本显示为紫色;而列表项目默认会缩进显示,并在左侧显示项目符号。在网页设计中,一般可以根据需要重新定…

切换win11 账户后,git报错

问题场景: 切换win11 账户后,git报错 git pull 报错: fatal: detected dubious ownership in repository at D:xxxxx D:/0xxxxxx is owned by: xxxxxxxxxxxxxxxxx but the current user is: xxxxxxxxxxxxxxxxxx To add an exception for this…

ESP-07S烧写固件记录

一,固件版本。 下面是官方默认AT指令版本,ESP-07S 的flash大小是4MB。 AT固件汇总 | 安信可科技 (ai-thinker.com) 二,烧录工具。 开发工具清单 | 安信可科技 (ai-thinker.com) 三,下载工具及连线。 使用USB转串口工具。 四&am…

Go的Defer简介

什么是延期? Defer 语句用于在存在 defer 语句的周围函数返回之前执行函数调用。该定义可能看起来很复杂,但通过示例就很容易理解。 例子 package mainimport ( "fmt" )func finished() { fmt.Println("Finished finding largest&qu…