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

uView使用心得

说实话我不爱用这个库,感觉很鸡肋,坑很多,可能没用习惯

picker选择器

绑定默认值是通过设置index,并且这个index需要通过api设置进去,设置defalutindex绑定值无效(只有初始化可以,后面动态改变就不行-如果这是个公共使用的,一个页面有多个地方用,那么它的index就要设置不一样);

datetime日期组件

本身他也是一种picker,所以它也有上面picker的问题,需要通过api设置,v-model也是不行(当然一个页面只有一个日期就没问题);
然后它还不支持秒,按理说秒不秒其实无所谓,但遇上了我们刁钻的测试,I 服了 YOU(测试),就是说我可以不用,但是你不能没有,你没有让我咋搞啊,本来打算直接在组件上改,但是后来发现已经有同事专门复制了一份出来改造过(针对这种需要改组件库的我拓展下https://blog.csdn.net/hclle/article/details/120305538),那我也在页面上改好喽,改起来倒也不难,我就大概说下,你就在组件里搜“minute”,照着minute后面加second,但有几处比较隐晦,你测试的时候打打断点,打打console.log定位下基本就解决了,需要实现的是年月日 时分秒和时分秒。

Upload上传

app上无法获取name,在app上它返回的是这些东西
在这里插入图片描述
那我们只能从其它字段下手了,这里我选择的url(和thumb是一样的),然后采用截取的方式,获取最后一个斜杠后面的内容作为name,其实这个name本身就是前端自己定义的,你就获取个时间戳当name也无所谓。
然后后续我又遇到有的图片可以跟表单一起提交成功,有的又不可以,自己观察又问后端是因为name太长了,后面又截取了一下。

const string = file.url.split('/')
// 取最后一个'/'为name,并且截取name的后xx位(因为后端限制了name最大长度)
name = string[string.length - 1].slice(-xx)

popup弹窗层

我的mode设置为right,默认它的位置就在右边最顶部,我们的需求是希望它在页面标题栏的下方,他的文档有一个safeAreaInsetTop: true留出顶部安全距离,但是我不知道为什么没实现,我踩了很多坑,四五处设置不停互换配合(safeAreaInsetTop,top、background-color css),并且还要打包在手机上安装才能测出效果(模拟器跟真机不一致),说实话这一块还是挺乱的,我都不知道该如何描述,我写下我试过的几种效果吧,这块只做参考,我也不想再继续研究了,觉得乱的可以忽略不看。
第一张是我最终要实现的效果,第二张是遇到的坑效果(配合不好就是这样的效果,首先是白色区域间距过大,其次是顶部没有在标题的下面)
在这里插入图片描述
在这里插入图片描述
它生成的标签结构是这样的
在这里插入图片描述
第一处、第二处都是组件自己生成的标签,第三处是我页面的内容了。
下面写下几种配合效果

1、safeAreaInsetTop:true(内容顶部有空白,白色背景间距),u-slide-right-enter-to top:100rpx(顶部有间隙,遮罩层间隙,不够,间隙最小), 第三处页面class background-color: '#fff' 
2、safeAreaInsetTop:false(内容顶部有空白,无白色背景间距), top:86rpx(顶部有间隙,遮罩层间隙,不够,间隙比上面的大),  第三处页面class background-color: '#fff' 
3、safeAreaInsetTop:true(顶部有空白,白色背景间距), top:0rpx(默认就是0,顶部有间隙,遮罩层间隙,不够,间距和第二个一样),  第三处页面class background-color: '#fff' 
4、safeAreaInsetTop:true(无白色背景间距), top:100rpx(顶部有间隙,遮罩层间隙,够了,刚好在标题下面), u-popup__content background-color:#fff。这个也是理想中的效果,推荐
5、safeAreaInsetTop:true(有白色背景间距), top:92rpx(顶部有间隙,间隙和第二个一样), 第三处页面class background-color: '#fff' 
6、safeAreaInsetTop:true(无白色背景间距), top:100(顶部有间隙,够了), 第三处页面class background-color: '#fff' , u-popup__content background-color: transparent,最终代码里是这样实现的

其实在第4次测试已经实现了,并且这个时候我也大概观察出来为什么,我也是想验证下我想的对不对,所以才有了第6次,但后面感觉实在太麻烦了,我的猜想还是有点模棱两可(可以看下我的胡言乱语,safeAreaInsetTop:true,会与顶部留出安全距离,看来是页面内容和顶部的距离,此时 u-popup__content设置了白色背景那这个间距就出来了,所以它俩不能配合,如果白色背景要设置在u-popup__content上,那么safeAreaInsetTop就只能用false),就没继续了。

相关文章:

uView使用心得

说实话我不爱用这个库,感觉很鸡肋,坑很多,可能没用习惯 picker选择器 绑定默认值是通过设置index,并且这个index需要通过api设置进去,设置defalutindex绑定值无效(只有初始化可以,后面动态改变…...

RabbitMQ(高阶使用)死信队列

文章内容是学习过程中的知识总结,如有纰漏,欢迎指正 文章目录 一、什么是死信队列? 二、死信队列使用场景 三、死信队列如何使用 四、打车超时处理 1.打车超时实现 以下是本篇文章正文内容 一、什么是死信队列? 先从概念解释上搞…...

怎么安装docker-compose

使用下列命令下载docker-compose(可选择其他版本) wget https://github.com/docker/compose/releases/download/v2.16.0/docker-compose-linux-x86_64 --no-check-certificate然后把该文件移动到/usr/local/bin/并重命名 mv docker-compose-linux-x86_…...

【机器学习】--- 自监督学习

1. 引言 机器学习近年来的发展迅猛,许多领域都在不断产生新的突破。在监督学习和无监督学习之外,自监督学习(Self-Supervised Learning, SSL)作为一种新兴的学习范式,逐渐成为机器学习研究的热门话题之一。自监督学习…...

【Linux修行路】网络套接字编程——UDP

目录 ⛳️推荐 前言 六、Udp Server 端代码 6.1 socket——创建套接字 6.2 bind——将套接字与一个 IP 和端口号进行绑定 6.3 recvfrom——从服务器的套接字里读取数据 6.4 sendto——向指定套接字中发送数据 6.5 绑定 ip 和端口号时的注意事项 6.5.1 云服务器禁止直接…...

哈希表数据结构学习

哈希表数据结构学习 哈希表基本概念哈希方法单值哈希与多值哈希哈希冲突1. 开放寻址法(Open Addressing)2. 链地址法(Chaining)3. 再哈希法(Rehashing)4. 建立公共溢出区(Overflow Area&#xf…...

数据结构——“二叉搜索树”

二叉搜索树是一个很重要的数据结构,它的特殊结构可以在很短的时间复杂度找到我们想要的数据。最坏情况下的时间复杂度是O(n),最好是O(logn)。接下来看一看它的接口函数的实现。 为了使用方便,这里采用模版的方式: 一、节点 temp…...

Java零基础-Java对象详解

哈喽,各位小伙伴们,你们好呀,我是喵手。运营社区:C站/掘金/腾讯云/阿里云/华为云/51CTO;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点,并以文字的形式跟大家一起交流,互…...

从Prompt到创造:解锁AI的无限潜能

文章目录 🍊AI内容创作核心:提示词Prompt1 什么是提示词工程?1.1 提示词的原理是什么?1.2 提示词工程师:百万年薪的职业?1.3 谁都能成为提示词工程师吗? 2 提示词书写的基本技巧3 常见的提示词框架3.1 CO-…...

sqlgun靶场攻略

打开界面 1.输入框测试回显点 -1union select 1,2,3#出现回显点 2.查看数据库名 -1union select 1,2,database()# 3.查看表名 -1union select 1,2,group_concat(table_name) from information_schema.tables where table_schemasqlgunnews# 4.查看admin表中列名 -1union se…...

《网络协议 - HTTP传输协议及状态码解析》

文章目录 一、HTTP协议结构图二、HTTP状态码解读1xx: 信息响应类2xx: 成功响应类3xx: 重定向类4xx: 客户端错误类5xx: 服务器错误类 一、HTTP协议结构图 二、HTTP状态码解读 HTTP状态码(英语:HTTP Status Code)是用以表示网页服务器超文本传…...

9.11 QT ( Day 4)

一、作业 1.Widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QTimerEvent> //定时器类 #include <QTime> #include <QtTextToSpeech> //文本转语音类QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACEcl…...

利用AI驱动智能BI数据可视化-深度评测Amazon Quicksight(四)

简介 随着生成式人工智能的兴起&#xff0c;传统的 BI 报表功能已经无法满足用户对于自动化和智能化的需求&#xff0c;今天我们将介绍亚马逊云科技平台上的AI驱动数据可视化神器 – Quicksight&#xff0c;利用生成式AI的能力来加速业务决策&#xff0c;从而提高业务生产力。…...

2024.9最新:CUDA安装,pytorch库安装

目录 一、CUDA安装 1.查看自己电脑适配的CUDA的最高版本 2.安装CUDA 3.检查环境变量是否配置&#xff0c;安装是否成功 二、pytorch库安装 1.pytorch库下载 2.选择合适的版本 3.查看版本 一、CUDA安装 1.查看自己电脑适配的CUDA的最高版本 在命令提示符里输入nvidia-…...

Vue3.0组合式API:setup()函数

1、什么是组合式API Vue 3.0 中新增了组合式 API 的功能&#xff0c;它是一组附加的、基于函数的 API&#xff0c;可以更加灵活地组织组件代码。通过组合式 API 可以使用函数而不是声明选项的方式来编写 Vue 组件。因此&#xff0c;使用组合式 API 可以将组件代码编写为多个函…...

利用AI驱动智能BI数据可视化-深度评测Amazon Quicksight(三)

简介 随着生成式人工智能的兴起&#xff0c;传统的 BI 报表功能已经无法满足用户对于自动化和智能化的需求&#xff0c;今天我们将介绍亚马逊云科技平台上的AI驱动数据可视化神器 – Quicksight&#xff0c;利用生成式AI的能力来加速业务决策&#xff0c;从而提高业务生产力。…...

2022高教社杯全国大学生数学建模竞赛C题 问题一(1) Python代码演示

目录 问题 11.1 对这些玻璃文物的表面风化与其玻璃类型、纹饰和颜色的关系进行分析数据探索 -- 单个分类变量的绘图树形图条形图扇形图雷达图Cramer’s V 相关分析统计检验列联表分析卡方检验Fisher检验绘图堆积条形图分组条形图分类模型Logistic回归随机森林import matplotlib…...

Qt QSerialPort数据发送和接收DataComm

文章目录 Qt QSerialPort数据发送和接收DataComm2.添加 Qt Serial Port 模块3.实例源码 Qt QSerialPort数据发送和接收DataComm Qt 框架的Qt Serial Port 模块提供了访问串口的基本功能&#xff0c;包括串口通信参数配置和数据读写&#xff0c;使用 Qt Serial Port 模块就可以…...

macOS上谷歌浏览器的十大隐藏功能

谷歌浏览器&#xff08;Google Chrome&#xff09;在macOS上拥有一系列强大而隐蔽的特性&#xff0c;这些功能能显著提高您的浏览体验。从多设备同步到提升安全性和效率&#xff0c;这些被低估的功能等待着被发掘。我们将逐步探索这些功能&#xff0c;帮助您最大化利用谷歌浏览…...

【C++篇】C++类与对象深度解析(二):类的默认成员函数详解

文章目录 【C篇】C类与对象深度解析&#xff08;二&#xff09;前言1. 类的默认成员函数2. 构造函数2.1 函数名与类名相同2.2 无返回值2.3 对象实例化时系统会自动调用2.4 构造函数可以重载2.5 默认构造函数的生成规则2.6 无参构造函数与全缺省构造函数的关系2.7 内置类型与自定…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作(核心)三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结,涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

AI书签管理工具开发全记录(十九):嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

libfmt: 现代C++的格式化工具库介绍与酷炫功能

libfmt: 现代C的格式化工具库介绍与酷炫功能 libfmt 是一个开源的C格式化库&#xff0c;提供了高效、安全的文本格式化功能&#xff0c;是C20中引入的std::format的基础实现。它比传统的printf和iostream更安全、更灵活、性能更好。 基本介绍 主要特点 类型安全&#xff1a…...