- 博客(36)
- 收藏
- 关注
原创 uni-appH5项目实现导航区域与内容区域联动效果
将导航区域与内容区域实现联动,即点击导航区域,内容区滚动到对应位置,内容区滚动过程中根据内容定位到相对应的导航栏。效果如下:侧边导航与内容联动效果。
2024-09-03 16:28:58
587
原创 H5利用navigator.mediaDevices实现语音功能记录
按住说话 松开发送 上滑取消 语音时长超过3分钟,自动结束录入并发送。采用方案:使用Web API navigator.mediaDevices 实现该功能。
2024-08-07 17:43:28
1846
原创 elementui 弹窗展示自动校验表单项bug
clearValidate() 方法清空表单校验项。表单校验失败一次之后,再次弹出表单,触发自动校验。使用nextTick规避报错。
2024-04-17 11:06:25
1014
原创 pageB->pageC,B跳转C需要记录B页面的滚动位置,C返回到B时定位到该位置
pageA:入口页面pageB:资讯列表页pageC:文章详情页。
2024-03-19 17:49:08
318
原创 实现网址链接超出自动换行
span 有样式 ( white-space: pre-wrap;),但是文字可以自动换行,链接无法自动换行,导致页面出现了横向滚动条。链接标签设置属性 overflow-wrap: anywhere;
2024-03-14 10:04:59
313
原创 promise.all按顺序批量上传图片文件
Promise.all可以将多个Promise实例包装成一个新的Promise实例,同时 Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的,即使后面的promose实例结束早于前面的实例,也会排列在后面。这也是采用promise.all实现按顺序批量上传图片文件。需求背景:批量上传图片,等全部图片上传成功后回显图片,并且回显的图片顺序要和用户批量点击时的图片顺序保持一致。解决方案:promise.all 等待原则。一、关于promise.all。
2023-10-12 10:38:31
583
原创 H5实现固定表头首列表格
解决方案:禁用ios的自身滚动,利用代码实现滚动效果(但是滚动会没有浏览器滚动那么流畅丝滑,如果小伙伴们有更好的解决方案~可以一起讨论呐)bug2:ios中纵向滚动、横向滚动不独立(横向滑动的同时,纵向会轻微滚动,纵向滑动的同时,横向会轻微滚动)三、js实现表头、首列滚动。bug1:ios橡皮筋效果。四、遇到的bug调整。
2023-09-06 17:47:18
888
原创 处理ios滚动的橡皮筋效果
前言:最近在实现H5固定表头首列的表格的时候,出现一个bug。当滚动表格的滚动条处于表格最上端和表格最左端的时候,仍然可以滑动(继续下滑和右滑),进而会出现一个空白,但是松手之后会回弹回去,但是这个问题只在苹果手机中出现,安卓手机不会。监听移动端的touch事件,在touchmove是判断,是否已经滚动到最上端或者最左端,如果是就禁用滚动事件,即阻止touch的默认事件。橡皮筋效果就是ios手机上出现滚动时,滑动到头时还可以继续拖拽出一段距离的空白,但松开手又立刻回弹回去的效果。
2023-09-06 17:14:03
1131
原创 H5实现首行固定表格
通过固定定位实现之后,大体效果虽然实现了,但是在ios遇到了问题:拖动整个表格的时候,表体会移动,但是表头还固定在页面上十分怪异。粘性布局在部分安卓手机自带的浏览器上遇到了问题,表头随着表格滚动上去了,没有固定表头的效果,具体原因没有深究。把表头和表格体拆分,表体滚动的关键在于固定高度,超出高度部分显示滚动条,思路三、拆分表头表体(自测是效果最优的)首行固定表格效果-优快云直播。思路一:利用固定定位将表头固定。思路二、利用粘性布局。
2023-09-06 15:50:11
305
原创 设置了elementui的时间日期组件的默认值导致DateTimePicke组件无法选择别的时间
使用this.$set()赋值,this.$set()赋值不会改变数据的响应式。target:要更改的数据源(可以是对象或者数组)一、问题:设置默认时间之后选择其他日期选不上。在修改时间发现,怎么也选不了其他的日期时间。关于this.$set()使用传值。key:要更改的具体数据。value :重新赋的值。
2023-04-14 11:02:34
2159
原创 gitlab配置ssh
2、进入C:\Users\liming\.ssh目录下找到id_rsa.pub文件,复制其中的值粘贴在Key区域的文本框。1、打开git bash窗口,输入ssh-keygen 产生公钥私钥。拿到gitlab账号之后需要配置ssh才能确保正常拉去提交代码。2、输入括号中的路径(该路径表示配置存放的路径)首先确认电脑上git环境配置成功,如未下载。1、在gitlab中找到setting。三、将ssh配置到gitlab。
2023-03-31 17:47:08
18497
原创 yarn install报错:yarn : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1,因为在此系统上禁止运行脚本。
yarn install报错:yarn : 无法加载文件 C:\Users\Administrator\AppData\Roaming\npm\yarn.ps1,因为在此系统上禁止运行脚本。
2023-02-06 20:01:10
788
原创 vue 安装依赖报错 npm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolve
vue 安装依赖报错 npm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolve
2022-09-06 19:41:02
1240
1
原创 uni-app 启动报错 Error: Cannot find module ‘webpack/lib/RuleSet‘
uni-app 启动报错 Error: Cannot find module 'webpack/lib/RuleSet'
2022-08-11 17:27:38
610
原创 yarn run dev 无法加载文件 C:\Program Files\nodejs\node_global\yarn.ps1,因为在此系统中禁止执行脚本
执行yarnrundev命令启动vue项目报错无法加载文件C\ProgramFiles\nodejs\node_global\yarn.ps1
2022-07-19 09:42:05
725
原创 引入jedata日期选择插件未生效以及插件图标未显示问题
我的问题:页面中引入了jedate插件所需的js以及css文件,但是页面中并未出现日期选择器。尝试了将这些文件从项目中抽离出来,放在本地发现插件好使,排除插件文件损坏的问题。页面效果:排错思路:tips:百分之八十也许都是jquery引入先后问题,所以可以先查看jquery和插件引入顺序1.如果插件依赖jQuery ,检查jQuery文件2.JQuery正常,检查插件文件是否正常3.都正常就看看是否因引入其他线上的东西而造成影响(注释大法一步步排除)一、解决插件不生效问题
2022-04-08 18:05:19
4011
原创 如何使用腾讯云存储图片
一、图片存储方案介绍1.存到自己公司购买的服务器上优点:好控制缺点成本高由于图片都存放到自己的服务器上,占据空间很大2. 存到三方云服务器(阿里云,七牛云,腾讯云)各种云有专门的为图片存储提供的云服务器,我们自己的服务器只存储图片地址即可1.前端传前端调用腾讯云API上传图片2.后端传图片文件传给自己的后端, 由后端上传到第三方图片服务器二、腾讯云cos申请配置官网:腾讯云 - 产业智变 云启未来1.创建账号并实名认...
2021-12-28 23:15:04
5864
原创 使用awaitTo之后无论登录成功或失败都执行了成功的逻辑
前言:利用awaitTo优化了await只能接收成功的结果之后,却发现无论成功还是失败都进行了登录成功的跳转!!!找了半天却发现少了它??一、登录代码handleLogin() { this.$refs.loginForm.validate(async(valid) => { if (valid) { //校验表单数据成功 this.loading = true const [err, res] = await loginA
2021-12-24 21:34:43
792
原创 优化trycatch(完结)
前言:阅读这篇文章前建议先看一下前置知识点 指路:优化trycatch所需的前置知识点_多多的小宝贝的博客-优快云博客啦啦啦~通过前面的知识我们已经知道:promise对象的then方法中虽然不能直接获取到请求失败的结果,但是我们可以借助一个新的Promise对象来中转一下,这样就可以在Promise对象的then方法中取到请求失败的结果啦~实现思路:利用promise对象A then方法返回的那个全新Promise对象B(全新:意思就是他就是他,和别的Promise对象不一样,是独立存在的)来中
2021-12-20 00:36:47
1080
原创 优化trycatch所需的前置知识点(Promise对象讲解)
前言:前端发送请求时我们经常用trycatch来捕获错误信息,但是你会不会觉得有时代码因为trycatch而导致嵌套太多大括号了呢?这些括号让我们的代码看起来眼花缭乱,下面我们就来优化trycatch,让我们的代码看起来整整齐齐把!在此之前,我们要先储备一些关于Promise对象的基础知识.话不多说,上代码!来喽来喽~~一、如何拿到Promise对象请求成功的结果1.封装一个函数,函数中返回Promise对象,方便复用这段代码 // 封装一个函数,函数中返回Promise对象 fu
2021-12-19 21:35:12
962
原创 基于axios进行二次封装
前言:思考:假设我们在项目中每一次请求都是直接使用axios,如果有一天我们要改用原生ajax请求,name代码改动的工程量是非常大的.但是,我们将axios统一封装起来,这样是不是简单许多呢?为了让我们的代码更加灵活, 统一管理,通常我们会选择呢封装axios一、封装axios1创建文件utils/request.js// 基于 axios 封装的请求模块import axios from 'axios'// 新建一个新的axios实例const newAxios = axios.
2021-12-13 13:03:06
5308
1
原创 如何解决跨域问题以及vuecli开发环境用代理服务器解决跨域问题
前言:在此之前,我们应该知道什么是跨域?和为什么会跨域?以及跨域的基本解决方法.同时扩展在vuecli开发环境如何用代理服务器解决跨域问题一、跨域:1.跨域的理解跨域即网页所在url(浏览器地址栏的地址)的协议, 域名, 端口号, 和Ajax请求url的协议, 域名, 端口号有任一对应不上的情况就发生跨域.跨域是是浏览器对ajax做出的限制.2.出现跨域的报错展示二、解决跨域问题(CORS/JSONP )1.CORS(需要后端大佬实现)1.1cors原理通过服务.
2021-12-12 20:36:43
1502
原创 ESLint语法检查
一、什么是ESLintESLint 是一个代码检查工具,用来检查你的代码是否符合指定的规范常见的规范举例:= 的前后必须有一个空格 函数名后面必须有空格 await必须用用在async修饰的函数内 ==必须转换成3个等二、ESLint的好处写代码过程中, 检查你代码是否错误, 如果错误会被关进小黑屋哦~ ESLint可以约束团队内代码的风格统一 三、ESLint在VSCode中使用1.下载这个插件到vscode中2.直接打开一定要把脚手架工程, 作为vsco
2021-12-07 21:50:05
2489
原创 projeceDemo1-借助@vue/cli包创建脚手架项目
前言:借助于@vue/cli包提供的脚手架搭建项目,可以让我们快速搭建项目基本环境.Vue官方提供的脚手架是一套标准的文件夹+文件结构+webpack配置,可以做到零配置开箱即用十分便捷前置准备:你的电脑一定要装过node或者yarn接下来就进入创建项目步骤啦~~一、全局安装@vue/cli模块包1.安装@vue/cli全局模块包,得到Vue命令,以后就可以用vue命令创建脚手架项目//yarn 命令yarn global add @vue/cli//npm 命令npm inst
2021-12-07 21:12:21
321
原创 CSS中常见隐藏元素的属性
visibility:hidden 隐藏元素本身,并且在网页中 占位置 display:none 隐藏元素本身,并且在网页中 不占位置(常用)overflow:hidden 隐藏超出盒子的内容部分(超出的内容虽隐藏但占位)案例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatib.
2021-08-17 10:46:11
421
1
原创 清除浮动的方法
清除浮动:清除浮动元素带来的影响(浮动元素不占位置,没办法撑开父元素的高度)方法一:设置高度给浮动元素的父元素设置高度 一般开发中高度会不确定,因此此方法不可取方法二:额外标签法在浮动元素的最后面添加一个空的块级元素,给这个块元素增加清除浮动的属性clear: both;.clear{ clear: both; }<divclass="clear"></div>方法三:单伪元素给浮动元素的父元素增加类名 clearfi...
2021-08-17 10:12:44
121
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人