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),就没继续了。

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

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

相关文章

半导体制造技术中的沉积和驱入(Deposition and drive-in)过程

来源:半导体制造技术导论——萧宏 沉积和驱入过程 图5.34 硼掺杂工艺高温扩散炉系统示意图 图5.35 扩散掺杂工艺流程 图5.36 扩散工艺在超浅结深(USJ)上的应用

【物联网技术大作业】设计一个智能家居的应用场景

前言: 本人的物联网技术的期末大作业,希望对你有帮助。 目录 大作业设计题 (1)智能家居的概述。 (2)介绍智能家居应用。要求至少5个方面的应用,包括每个应用所采用的设备,性能&am…

【GPU版】Windows下PyTorch入门深度学习环境安装与配置

如果电脑有NVIDIA GPU显卡,看【GPU版本】;否则,看【CPU版本】 聊聊PyTorch和Tensorflow 它们都是python的库/包 pip3是给python3使用的,由于现在用的python基本上都是3以上版本,所以pip和pip3没有区别 聊聊Anacond…

Python爬虫使用实例-wallpaper

1/ 排雷避坑 &#x1f95d; 中文乱码问题 print(requests.get(urlurl,headersheaders).text)出现中文乱码 原因分析&#xff1a; <meta charset"gbk" />解决方法&#xff1a; 法一&#xff1a; response requests.get(urlurl,headersheaders) response.en…

F12抓包12:Performance(性能)前端性能分析

课程大纲 使用场景: ① 前端界面加载性能测试。 ② 导出性能报告给前端开发。 复习&#xff1a;后端(接口)性能分析 ① 所有请求耗时时间轴&#xff1a;“网络”&#xff08;Network&#xff09; - 概览。 ② 单个请求耗时&#xff1a;“网络”&#xff08;Network&#xf…

【LLM多模态】CogVideoX文生视频模型结构和训练过程

note 通过两阶段训练3D VAE&#xff0c;对视频进行压缩编码 第一阶段&#xff1a;在较低分辨率和较少帧数的视频上进行训练&#xff0c;学习压缩和重建视频的基本能力第二阶段&#xff1a;在更长的视频上训练&#xff0c;提高模型处理长视频的能力&#xff0c;同时保持帧与帧之…

[进阶]面向对象之 包 final

文章目录 包什么是包包名的规则:什么时候需要导包 final常量 包 什么是包 包就是文件夹。用来管理各种不同功能的Java类&#xff0c;方便后期代码维护。 包名的规则: 公司域名反写包的作用&#xff0c;需要全部英文小写&#xff0c;见名知意。使用其他类时&#xff0c;需要…

idea连接数据库大避雷!!!

再跟着黑马学习的时候&#xff0c;用黑马的资料安装的数据库&#xff0c;命令行能正常启动&#xff0c;SQLyog也能正常连接&#xff0c;就是tmd idea连接不了。不论是原始的jdbc,还是其它方式都不行&#xff0c;一直报错&#xff1a; 然后就各种搜&#xff0c;有的说数据库驱动…

react18基础教程系列--安装环境及packagejson文件分析

一个React项目中&#xff0c;默认会安装: react:React框架的核心react-dom:React 视图渲染的核心「基于React构建WebApp(HTML页面)J—>react-native:构建和渲染App的react-scripts: 脚手架为了让项目目录看起来干净一些&#xff0c;把webpack打包的规则及相关的插件/LOADER…

51单片机 - DS18B20实验1-读取温度

上来一张图&#xff0c;明确思路&#xff0c;程序整体裤架如下&#xff0c;通过单总线&#xff0c;单独封装一个.c文件用于单总线的操作&#xff0c;其实&#xff0c;我们可以把点c文件看成一个类操作&#xff0c;其属性就是我们面向对象的函数&#xff0c;也叫方法&#xff0c…

Vue.nextTick 的工作机制

Vue.nextTick 是异步执行的&#xff0c;它使用了微任务&#xff08;microtasks&#xff09;或宏任务&#xff08;macrotasks&#xff09;&#xff0c;具体使用哪种取决于 JavaScript 环境的支持情况。具体来说&#xff0c;Vue 优先选择使用微任务&#xff0c;如 Promise.then&a…

重生奇迹MU 浅析那些极具魔幻色彩的职业装备

沉稳厚重的剑士职业装备 剑士是所有喜欢近战作战方式的玩家首选的职业。作为来自勇者大陆的最强战士&#xff0c;剑士所穿戴的职业装备都偏向沉稳和厚重&#xff0c;通常全身覆盖重甲。这是因为剑士需要冲向敌人战斗&#xff0c;没有过硬的装备护身&#xff0c;他们很难承受住…

【车载开发系列】ParaSoft单元测试环境配置(三)

【车载开发系列】ParaSoft单元测试环境配置(三) 【车载开发系列】ParaSoft单元测试环境配置(三) 【车载开发系列】ParaSoft单元测试环境配置(三)一. 去插桩设置Step1:静态解析代码Step2:编辑Parasoft文件Step3:确认去插桩二. 新增测试用例Step1:生成测试用例Step2:执…

【Python第三方库】OpenCV库实用指南

文章目录 前言安装OpenCV读取图像图像基本操作获取图像信息裁剪图像图像缩放图像转换为灰度图图像模糊处理边缘检测图像翻转图像保存 视频相关操作方法讲解读取视频从摄像头读取视频 前言 OpenCV&#xff08;Open Source Computer Vision Library&#xff09;作为一个强大的计…

20 递归算法精髓解析:基准、性质、案例(阶乘、斐波拉契、猴子吃桃、汉诺塔等)、与循环的对比

目录 1 概述 2 递归的基本组成部分 2.1 基准情况 2.2 递归步骤 2.3 案例&#xff1a;循环实现阶乘的计算 2.4 案例&#xff1a;递归函数实现阶乘的计算 3 递归的性质 3.1 自我调用 3.2 栈的使用 3.3 问题分解 3.4 性能考虑 3.5 案例&#xff1a;递归的回溯 4 综合…

学习结构体的使用

对于结构体的创建&#xff0c;首先要创建一个结构体类型&#xff0c;像下面这样&#xff1a; 结构体对成员的访问&#xff0c;就是变量名.成员就可以了 当然对于结构体的声明还有一些特殊的声明 结构体的自引用 结构体的重命名

RK3562/3588系列之5—其他实用工具

RK3562/3588系列之5—其他实用工具 1. vmware 虚拟机与主机之间共享文件夹2.RK3588开发板与电脑进行adb连接参考文献1. vmware 虚拟机与主机之间共享文件夹 使用此功能前需要提前安装好vmware tools。 启动虚拟机,依次进行如下操作,在主机创建共享文件夹。 然后就可以在如下…

Java | Leetcode Java题解之第404题左叶子之和

题目&#xff1a; 题解&#xff1a; class Solution {public int sumOfLeftLeaves(TreeNode root) {if (root null) {return 0;}Queue<TreeNode> queue new LinkedList<TreeNode>();queue.offer(root);int ans 0;while (!queue.isEmpty()) {TreeNode node que…

记录一下,Vcenter清理/storage/archive空间

一、根因 vpostgres&#xff1a;这个目录可能包含与 vCenter Server 使用的 PostgreSQL 数据库相关的归档文件过多&#xff0c;导致空间被占用。 二、处理过程 1、SSH登陆到Vcenter. 2、df -Th **图中可以看到 /storage/archive 使用占比很高。 /storage/archive 目录通常用…

三明儿童自闭症寄宿制学校:关爱、教育、成长一站式服务

三明儿童自闭症寄宿制学校的启示&#xff1a;广州星贝育园——自闭症儿童的一站式成长乐园 在探讨自闭症儿童教育的道路上&#xff0c;寄宿制学校以其独特的优势&#xff0c;为孩子们提供了集关爱、教育、成长于一体的全方位服务。虽然文章开头提及了“三明儿童自闭症寄宿制学…