前端开发中遇到的小问题以及解决方案记录2

news2024/11/24 15:58:26

1、H5中适配屏幕的工具-postcss-px-to-viewport

postcss-px-to-viewport。因为设计稿一般给的都是375px宽度的,所以假如一个字体是16px,那么在开发中不能直接写死为16px,因为各个厂商的手机屏幕大小是不同的,所以要根据屏幕大小去自适应修改px的大小,postcss-px-to-viewport这个工具就能很好地把项目中的px单位自动改为计算后的vw。在不同版本的vue-cli脚手架里可能需要配置的不同,可以参考下这篇文章:Vue使用 postcss-px-to-viewport 适配移动端、PC端布局 px自动转换vw

2、H5开发中用到的一些工具

vconsole:简单理解就是在简单版的浏览器开发者工具,不过功能是比web浏览器的开发者工具少很多的,但是现在最流行的查看网络请求的库大多就是这个,只需要在网上找个vconsole的SDKdownload下来,然后在代码中 new vconsole()就可以了。

adb:实时开发调试H5的工具,在开发web的时候实时修改代码,浏览器就会更新,但是如果想在手机实现这个功能就需要借助工具。adb就是这样一个工具。可以参考这篇文章下载使用:ADB安装及使用详解(非常详细)从零基础入门到精通,看完这一篇就够了

3、时间选择器设置本月最后一天

在一次开发中,需要为时间选择器设置快捷选项(这个后面单独写一篇把所有快捷选项及代码列出来),有一个快捷选项为“本月”,那么每个月可能最后一天的日期不同,可能为28 29 30 31等等。当时脑子里也没有这个小知识点,解决就是:date.setMonth(date.getMonth() + 1, 0); 将日期设置为下个月的第0天,在时间选择器中默认就对应本月的最后一天。

4、解决相邻div的border重叠

开发过程中可能会遇到多个带有border的div并排,但是此时div的边距就会和相邻的div的border重叠。一个简单的解决方法是将除了第一个div的所有div都设置margin-left: -1px; 然后如果需要点击某个div的话,就将点击的这个div的z-index设为1;可以参考这篇文章:多个相邻元素切换效果出现边框重叠问题的解决方法

重叠

不重叠

5、try catch不能捕获异步的错误只能捕获同步错误

try catch不能捕获异步的错误,只能捕获同步的错误,这个点其实一直知道,但是脑子没形成这个体系,第一次看见这句话的时候还犹豫了一下,所以在这里记录下。之前学习了async await的实现后知道了其实await后的函数返回的其实也是个promise,所以简单的解决方法就是直接const res = await testFun().catch(err () => console.log(err)); 直接在这个函数后接catch。但是这样每个函数都得这样写一遍,有个库是专门处理异步错误的,叫await-to-js。关于处理异步错误的方法掘金上有很多,大家可以去参考下。

6、Date.parse返回是准确到秒

Date.parse()返回的时间戳是只返回到s数,后面的毫秒数全是0;

7、antd的分页组件中的英文转换为中文

不知道为什么antd的分页组件复制下来是英文的字,需要加如下操作才能显示为中文。

import zh_CN from 'antd/es/locale/zh_CN';
import {ConfigProvider} from 'antd';

<ConfigProvider locale={zh_CN}>
 <Pagination></Pagination>
</ConfigProvider>

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

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

相关文章

一款支持同一个屏幕界面同时播放多个视频的视频播放软件

GridPlayer 是一款基于 VLC 的免费开源跨平台多视频同步播放工具&#xff0c;支持在一块屏幕上同时播放多个视频。其主要功能包括&#xff1a; 多视频播放&#xff1a;用户可以在一个窗口中同时播放任意数量的视频&#xff0c;数量仅受硬件性能限制。支持多种格式和流媒体&…

半年高达552亿元,锁定云第一,中国电信天翼云紧追不舍

【科技明说 &#xff5c; 科技热点关注】 刚才我注意到中国电信公布2024年中期业绩&#xff0c;报告期内&#xff0c;中国电信实现营业收入为人民币2660亿元&#xff0c;同比增长2.8%&#xff0c;其中服务收入为人民币2462亿元&#xff0c;同比增长4.3%&#xff1b;净利润为人民…

python内置模块datetime.datetime类详细介绍

Python的datetime模块是一个强大的日期和时间处理库&#xff0c;它提供了多个类来处理日期和时间。主要包括几个功能类datetime.date、datetime.time、datetime.datetime、datetime.timedelta,datetime.timezone等。 总结&#xff1a; datetime类的功能函数众多&#xff0c;大…

【代码随想录训练营第42期 续Day52打卡 - 图论Part3 - 卡码网 103. 水流问题 104. 建造最大岛屿

目录 一、做题心得 二、题目与题解 题目一&#xff1a;卡码网 103. 水流问题 题目链接 题解&#xff1a;DFS 题目二&#xff1a;卡码网 104. 建造最大岛屿 题目链接 题解&#xff1a;DFS 三、小结 一、做题心得 也是成功补上昨天的打卡了。 这里继续图论章节&#xff…

AI prompt(提示词)

# 好用的用于学习的AI提示词 ## 费曼学习法 请使用费曼学习法&#xff0c;用简单的语言解释&#xff08;量子力学&#xff09;是什么&#xff0c;并提供一个简单的例子来说明它如何应用 ## 帕累托法则&#xff08;80/20原则&#xff09; 将&#xff08;量子力学&#xff09;最…

Chapter 13 普通组件的注册使用

欢迎大家订阅【Vue2Vue3】入门到实践 专栏&#xff0c;开启你的 Vue 学习之旅&#xff01; 文章目录 前言一、组件创建二、局部注册三、全局注册 前言 在 Vue.js 中&#xff0c;组件是构建应用程序的基本单元。本章详细讲解了注册和使用 Vue 的普通组件的两种方式&#xff1a;…

图像分割分析效果

下面是训练集的效果, # 训练集dice: 0.9219 - iou: 0.8611 - loss: 0.0318 - mae: 0.0220 - total: 0.8915 basnet_model.evaluate(train_dataset) 损失我只用了二元交叉熵,主要比较损失的影响 上面就是模型在训练集上的效果,可见,模型在训练集上拟合的非常好,既学到了一些有用…

百万次使用的高颜值在线绘图平台ImageGP系列教程

在线平台BIC (https://www.bic.ac.cn/BIC/#/, 点击阅读原文或百度搜索皆可访问到)是 ImageGP的重构升级版&#xff0c;重构于2020年初。 该平台采用配置文件快速部署工具、生成结果或结果报告。其绘图和分析基于 R 语言(ImageGP 包, 在早期ImageGP脚本的基础上重新进行了封装&a…

flume 使用 exec 采集容器日志,转储磁盘

flume 使用 exec 采集容器日志&#xff0c;转储磁盘 在该场景下&#xff0c;docker 服务为superset&#xff0c;flume 的sources 选择 exec &#xff0c; sinks选择 file roll 。 任务配置 具体配置文件如下&#xff1a; #simple.conf: A single-node Flume configuration#…

深入理解java并发编程之aqs框架

跟synchronized 相比较&#xff0c;可重入锁ReentrankLock其实原理有什么不同&#xff1f; 所得基本原理是为了达到一个目的&#xff1b;就是让所有线程都能看到某种标记。synchronized通过在对象头中设置标记实现了这一目的&#xff0c;是一种JVM原生的锁实现方式。而Reentran…

基于深度学习 卷积神经网络resnext50的中医舌苔分类系统

项目概述 本项目旨在通过深度学习技术&#xff0c;特别是利用卷积神经网络&#xff08;Convolutional Neural Networks, CNNs&#xff09;中的ResNeXt50架构&#xff0c;实现对中医舌象图像的自动分类。该系统不仅能够识别不同的舌苔类型&#xff0c;还能够在PyQt5框架下提供一…

IBM Storwize V7000存储控制器故障节点报错574

背景&#xff1a;由于客户机房搬迁&#xff0c;需要下电迁移设备。该存储自2016年投入生产使用后&#xff0c;从未关过机&#xff0c;已正常运行七八年时间&#xff0c;期间只更换过硬盘&#xff0c;无其他硬件故障。 在GUI界面点击关闭系统后&#xff0c;大概等了40分钟&…

AIGC简化文件管理:Python自动重命名Word和PDF文件

1.背景 大家应该也有遇到&#xff0c;自己电脑有很多文件命名不合理的文件&#xff0c;比如&#xff1a;文件1、想法3 &#xff0c;当你长时间再看到这个文件的时候&#xff0c;已经很难知道文件内容。 今天我们将借助AIGC的编码能力&#xff0c;帮我们生成一个批量改文件名的…

多个路由器级联实现子网的方式

好久没写博客啦&#xff0c;最近搬家&#xff0c;换了网络环境&#xff0c;简单记录一下网络配置。 拓扑图就不画了&#xff0c;光猫 - > 华为TC7102路由 -> 华为AX2 Pro路由 -> 各种设备&#xff0c;简单表示就是这样。 原因是第一个路由是房东的&#xff0c;我希望自…

绿色能源在日常生活中的革新应用

绿色能源在日常生活中的革新应用 在当今社会&#xff0c;绿色能源已成为推动可持续发展的关键力量。它不仅代表着对环境的尊重与保护&#xff0c;更引领着生活方式的绿色转型。在我们的日常生活中&#xff0c;绿色能源正以多样化的形式&#xff0c;悄然改变着我们的生活方式。…

emlog Pro动态百分比顶部滚动条插件

插件介绍 给emlog博客顶部添加一个动态百分比顶部滚动条&#xff0c;可以选择设置图片、渐变背景样式。这个动态效果出现好久了&#xff0c;然后在js监测屏幕下拉值&#xff0c;最后用css改变图片和背景的宽度&#xff0c;从而实现动态的效果。目前支持10多种样式供选择&#…

iPhone手机清理软件:照片清理功能全解析

在数字化生活中&#xff0c;智能手机成为我们记录生活点滴的主要工具&#xff0c;尤其是iPhone&#xff0c;以其卓越的相机功能备受用户青睐。然而&#xff0c;成千上万的照片迅速堆积&#xff0c;不仅占用了大量存储空间&#xff0c;还使得设备运行缓慢。在众多解决方案中&…

软件工程-图书管理系统的概要设计

软件概要设计说明书 目录 软件概要设计说明书 一、引言 1.1 编写目的 1.2 背景 1.3 定义 1.3.1特定对象 1.3.2专业术语 1.4 参考资料 二、总体设计 2.1 需求规定 2.1.1信息要求 2.1.2功能要求 2.2 运行环境 2.3 基本概要设计和处理流程 2.4 体系结构设计 2.5 模…

Android Jetpact Lifecycle 解析

认识 Lifecycle Lifecycle 是什么 Lifecycle 是 Jetpack 组件库中的一个生命周期感知型组件。在 Lifecycle 出现之前&#xff0c;需要手动从外部宿主&#xff08;如 Activity、Fragment 或自定义宿主&#xff09;中将生命周期事件分发到功能组件内部&#xff0c;这势必会造成…

GEE数据集:加拿大卫星森林资源调查 (SBFI)-2020 年加拿大森林覆盖、干扰恢复、结构、物种、林分年龄以及 1985-2020 年林分替代干扰的信息

目录 简介 数据集后处理 数据下载链接 矢量属性 代码 代码链接 引用 许可 网址推荐 0代码在线构建地图应用 机器学习 加拿大卫星森林资源调查 (SBFI) 简介 卫星森林资源清查&#xff08;SBFI&#xff09;提供了 2020 年加拿大森林覆盖、干扰恢复、结构、物种、林分…