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

2024-09-07 18:28

本文主要是介绍前端开发中遇到的小问题以及解决方案记录2,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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>

这篇关于前端开发中遇到的小问题以及解决方案记录2的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1145809

相关文章

linux下多个硬盘划分到同一挂载点问题

《linux下多个硬盘划分到同一挂载点问题》在Linux系统中,将多个硬盘划分到同一挂载点需要通过逻辑卷管理(LVM)来实现,首先,需要将物理存储设备(如硬盘分区)创建为物理卷,然后,将这些物理卷组成... 目录linux下多个硬盘划分到同一挂载点需要明确的几个概念硬盘插上默认的是非lvm总结Linux下多

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

Python Jupyter Notebook导包报错问题及解决

《PythonJupyterNotebook导包报错问题及解决》在conda环境中安装包后,JupyterNotebook导入时出现ImportError,可能是由于包版本不对应或版本太高,解决方... 目录问题解决方法重新安装Jupyter NoteBook 更改Kernel总结问题在conda上安装了

pip install jupyterlab失败的原因问题及探索

《pipinstalljupyterlab失败的原因问题及探索》在学习Yolo模型时,尝试安装JupyterLab但遇到错误,错误提示缺少Rust和Cargo编译环境,因为pywinpty包需要它... 目录背景问题解决方案总结背景最近在学习Yolo模型,然后其中要下载jupyter(有点LSVmu像一个

解决jupyterLab打开后出现Config option `template_path`not recognized by `ExporterCollapsibleHeadings`问题

《解决jupyterLab打开后出现Configoption`template_path`notrecognizedby`ExporterCollapsibleHeadings`问题》在Ju... 目录jupyterLab打开后出现“templandroidate_path”相关问题这是 tensorflo

如何解决Pycharm编辑内容时有光标的问题

《如何解决Pycharm编辑内容时有光标的问题》文章介绍了如何在PyCharm中配置VimEmulator插件,包括检查插件是否已安装、下载插件以及安装IdeaVim插件的步骤... 目录Pycharm编辑内容时有光标1.如果Vim Emulator前面有对勾2.www.chinasem.cn如果tools工

在MySQL执行UPDATE语句时遇到的错误1175的解决方案

《在MySQL执行UPDATE语句时遇到的错误1175的解决方案》MySQL安全更新模式(SafeUpdateMode)限制了UPDATE和DELETE操作,要求使用WHERE子句时必须基于主键或索引... mysql 中遇到的 Error Code: 1175 是由于启用了 安全更新模式(Safe Upd

Python安装时常见报错以及解决方案

《Python安装时常见报错以及解决方案》:本文主要介绍在安装Python、配置环境变量、使用pip以及运行Python脚本时常见的错误及其解决方案,文中介绍的非常详细,需要的朋友可以参考下... 目录一、安装 python 时常见报错及解决方案(一)安装包下载失败(二)权限不足二、配置环境变量时常见报错及

最长公共子序列问题的深度分析与Java实现方式

《最长公共子序列问题的深度分析与Java实现方式》本文详细介绍了最长公共子序列(LCS)问题,包括其概念、暴力解法、动态规划解法,并提供了Java代码实现,暴力解法虽然简单,但在大数据处理中效率较低,... 目录最长公共子序列问题概述问题理解与示例分析暴力解法思路与示例代码动态规划解法DP 表的构建与意义动

Java多线程父线程向子线程传值问题及解决

《Java多线程父线程向子线程传值问题及解决》文章总结了5种解决父子之间数据传递困扰的解决方案,包括ThreadLocal+TaskDecorator、UserUtils、CustomTaskDeco... 目录1 背景2 ThreadLocal+TaskDecorator3 RequestContextH