前端知识
关注
分享
扫一扫
文章平均质量分 58
那就可爱多一点点
程序员，喜欢和挑战的前端童鞋，希望可以一起沟通学习
展开
-
H5页面多个视频如何只同时播放一个？
H5页面多个视频如何保证每次只播放一个？原创 2024-11-15 16:04:52 · 1306 阅读 · 0 评论 -
如何处理 iOS 客户端内 Webview H5 中后台播放的音视频问题
在 iOS 客户端中，通过 WebView 打开 H5 页面时，如果页面中包含视频或音频内容，WebView 默认情况下会继续在后台播放这些媒体。**即使用户切换到了其他应用，媒体也不会停止播放**，这可能导致以下几个问题：原创 2024-11-11 16:15:27 · 1642 阅读 · 0 评论 -
一篇文章搞懂 Hybrid H5 开发中的刘海屏与安全区域问题
在开发Hybrid应用时，我们经常遇到需要自己设计导航栏的情况。这种设计必须考虑到不同设备的屏幕特性，比如iOS和Android设备的刘海屏和底部安全区域高度的问题。在开发移动设备上的网页时，需要充分了解移动设备的布局特点。视口（Viewport）：移动设备的视口通常指浏览器的显示区域，可以通过meta标签设置视口属性，如宽度、高度和缩放比例。刘海屏（Notch Screen）原创 2024-10-25 13:51:21 · 1159 阅读 · 0 评论 -
使用ant design 的tree控件时给checkedKeys赋值导致树结点点击无效
这是在组件首次加载时初始化选中的节点，只会生效一次，之后不会再更新。: 这个属性用于控制受控状态下的节点选中，允许动态改变节点的选中状态，可以实时更新回显值。使用 defaultCheckedKeys 很容易导致的问题是，节点选中状态只会在组件初次渲染时生效，一旦外部的选中状态发生变化，它就无法反映更新。因此，当你需要在父组件中动态更新 Tree 的选中状态时，defaultCheckedKeys 显得有些不够灵活。原创 2020-12-30 16:20:24 · 7071 阅读 · 1 评论 -
vue实现输入框粘贴图片自动上传图片文件
利用input输入自带的方法paste。根据文件类型来判定是不是图片，如果是图片就把文件上传到后端。需求背景是用户粘贴截图或者复制的图片后，需要自动上传文件后端。创建完成后，我们就可以在项目中开始实现粘贴图片自动上传的功能。从 paste 事件中提取图片数据。将提取的图片上传到服务器。捕获 paste 事件。原创 2022-07-11 19:33:27 · 3547 阅读 · 4 评论 -
Tab选项卡的动画切换demo
Tab选项卡动画切换原创 2022-07-07 14:44:48 · 1145 阅读 · 0 评论 -
JS实现点击一个按钮隐藏和显示div
简单JS基础入门时的demo原创 2018-10-03 19:45:24 · 14573 阅读 · 1 评论 -
Angular路由传参方式和以及坑点
Angular路由传参和跳转问题原创 2022-07-06 14:32:05 · 684 阅读 · 0 评论 -
在前端开发中，页面渲染指什么
从上面这个图中，我们可以看到那么几个事：1）浏览器会解析三个东西：一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。CSS，解析CSS会产生CSS规则树。Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.2）解析完成后，浏览器引擎会...原创 2018-10-13 11:01:06 · 10149 阅读 · 0 评论 -
关于el-table调用清除方法clearSelection()时会触发change方法的解决方案
背景最近项目有个需求场景是左边账户切换时展示表格的数据，表格是同一个table，所以切换时理想场景是先清空已选值，然后再手动回显保存的已选值。遇到的问题是：每次调用clearSelection（）会触发change函数，导致保存的已选值被赋值为空数组，一直存不了。解决方案是添加一个标识来判定是清空和change方法。调用toggleRowSelection(item, true);方法是勾选，但是会记录在table的change事件中，你再操作勾选，会连同回显的和已选的一起返回，存在重复数据。所以原创 2022-02-27 22:44:02 · 5346 阅读 · 0 评论 -
前端面试必备知识：迭代器（iterator）的概念
前言：在JavaScript中，计数循环就是最简单的迭代。面试的时候经常被问到的一个问题：for-of 和for-in的区别？for - in 是对对象的进行遍历；for - of 是对数组进行遍历，可以使用continue、break、return、thorow提前退出。for-of为什么不能遍历对象，var s = { name: 'pretty', age: 10}for(let item of s) { console.log(item)}//原创 2022-01-10 00:23:53 · 719 阅读 · 0 评论 -
Vue拿到二进制流图片转为正常图片并显示
第一步axios({ method: 'get', url, responseType: 'arraybuffer' // 最为关键 }) .then(function (response) { that.src = 'data:image/jpeg;base64,' + that.arrayBufferToBase64(response.data) })arrayBufferToBase6原创 2020-09-17 11:43:24 · 11993 阅读 · 5 评论 -
npm 安装yarn 的方法
npm -i yarn -gyarn -v // 查看安装成功没有原创 2020-12-27 15:58:57 · 6710 阅读 · 2 评论 -
从零开始到完整的React后台管理项目开发路程(第二节)
今天我们做登录页面开始之前先引入一个全局初始化CSS文件，引入到html.js中原创 2020-07-31 12:14:19 · 311 阅读 · 0 评论 -
小程序模板推送
第一步：先去小程序公众平台开启模板推送https://mp.weixin.qq.com/wxamp/devprofile/get_profile?token=342095445&lang=zh_CN讲讲我和后端遇到的坑：刚开始是填写URL一直报错请求超时,请检查填写的信息是否正确，经过检查之后发现需要配置到服务器下后成为线上地址，并且一定要走的通，下一填写Token一直报错Token...原创 2020-01-09 11:32:58 · 359 阅读 · 0 评论 -
css多行文本溢出省略号显示
一、通过css来定义行数.contents { width: 200px; // 定义宽度 border: 3px solid #eee; overflow: hidden; text-overflow: ellipsis; // 溢出部分显示... // 控制行数 display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; }二、现在文本框看起来很拥挤，想给加内边距，如果直接原创 2021-03-02 10:10:04 · 268 阅读 · 0 评论 -
悬浮动画切换重叠处触发来回闪烁问题
最近做做官网的时候有个动画效果，点击切换刚开始是正常的，到后面无意间悬浮到两个div重叠的地方是就出现了交替闪烁问题，查了下资料，采用的防抖解决的：var t = null $('.swiper-slide').mouseover(function() { clearTimeout(t); t = setTimeout(() => { var index = $(this).index() var e = document.getElementById("parter原创 2021-04-06 14:51:06 · 203 阅读 · 0 评论 -
用JS将RFC3339格式日期与标准格式日期之间的相互转换
标准格式日期转为RFC3339let y = new Date().getFullYear()let m = new Date().getMonth()+1<10?'0'+(new Date().getMonth()+1):(new Date().getMonth()+1)let d = new Date().getDate()<10?'0'+new Date().getDate():new Date().getDate()let hh = new Date().getHours()&l原创 2020-08-14 11:41:47 · 3650 阅读 · 0 评论 -
常用的Echart的 一些配置（折线图双Y轴）
一、折线图和柱状图 xAxis: { axisLine:{ // 是否显示坐标线 show:false, }, splitLine:{ show:false }, // 横线分割线 axisLabel: { textStyle: {原创 2021-02-08 13:42:02 · 7436 阅读 · 3 评论 -
雅虎Yahoo 前段优化 14条军规
Yahoo 14条 雅虎十四条腾讯前端设计的Leader推荐我背熟的。请大家都能好好学习，不要像我一样一扫而过，好好的记下来！不仅仅是晓得一些CSS xhtml就好了，深刻认识到很多的东西需要学习的。很早就用Firebug，但是却没听说过Yslow，这叫不喜欢追求。希望大家关注前端设计的，多追求。有兴趣的同学可以装个 Firebug 下的 Yslow ，测试下自己的网站。Web 应用...转载 2018-10-13 10:01:40 · 172 阅读 · 0 评论 -
微信小程序如何引入iconfont图标字体库
我选择引入字体图标库的原因是加载图片会影响小程序页面的打开速度第一步：去阿里巴巴的图标库找到你喜欢的图标加入购物车添加到你创建的项目在下载的文件中把css文件后缀名改为wxss放入你的小程序项目中在全局app.wxss引入你的wxss在你需要用的地方写入...原创 2020-09-11 16:31:56 · 874 阅读 · 0 评论 -
must set key for ＜rc-animate＞ children问题
在使用React开发的时候，其中数据回显的时候用到了upload组件回显图片，遇到这个问题发现是图片数组长度虽然不为0，但是里面的参数没有值，所以组件回显遍历的时候不成功！提示这种错误修改方法判断没有传图片的时候我觉得出现这种情况的原因是新增的时候没有判断图片数组为空的时候不传给后端，所以有个默认为空的时候...原创 2020-07-24 18:28:06 · 4243 阅读 · 0 评论 -
['1a', '3b', '1c', '2a', '7b', '2a']这样一个由数字和字母构成的数组，求出现最多次字母的前系数和
function sortting(obj) { let result = [] var count = 0; //用来创建新数组 var max = 0; //找出系数最大值 for (var item in obj) { var temp = obj[item].substring(obj[item].length - 1, obj[item].length); ...原创 2020-04-06 16:52:00 · 217 阅读 · 0 评论 -
css文字溢出部分用省略号显示
单行文本溢出：display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;多行文本溢出overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2; // 设置要显示的行数...原创 2020-12-01 11:55:33 · 234 阅读 · 0 评论 -
div垂直居中的几种方法
第一种1. 父类.father { height:100%; width:100%; display:flex; background-color: red;}2. 子类.child { height:40%; width:50%; margin:auto; background-color: blue;}第二种1. 父类.father { height: 100%; width: 100%; position: relative; backg原创 2020-07-30 18:45:03 · 2355 阅读 · 0 评论 -
git SSL certificate problem: unable to get local issuer certificate
今天用git获取项目的时候提示git SSL certificate problem: unable to get local issuer certificate这个问题是由于没有配置信任的服务器HTTPS验证。默认，cURL被设为不信任任何CAs，就是说，它不信任任何服务器验证。只需要执行下面命令就可以解决git config --global http.sslVerify false...原创 2020-08-04 13:34:34 · 157 阅读 · 0 评论 -
微信跳转接口:微信引导用户右上角打开浏览器，访问APP下载链接
效果图：代码<!DOCTYPE html ><html xmlns:th="http://www.thymeleaf.org"> <HEAD> <TITLE>欢迎下载 Ta</TITLE> <META charset=utf-8> <META name=viewport content=width=device-width,initial-scale=1.0,maximum-scale=1.0,user-sc原创 2020-08-03 14:23:25 · 3644 阅读 · 0 评论 -
uniapp开发h5调摄像头识别二维码信息
因为html5+是要在app环境下运行,所以先创建一个5+项目我是觉得一个页面想要扫码识别后拿到数据不是很方便就创建了两个vue来进行测试，也可以在一个页面进行index.vue<template> <view class="content"> <view>二维码数据是：{{result}}</view> <button class="btn" type="primary" @tap="open">打开扫码</..原创 2021-01-12 20:16:40 · 4624 阅读 · 1 评论 -
web端新手指引、冷启动、通用组件
Attribute参数说明类型可选值默认值isModal是否需要遮罩层Booleantrue / falsetrueguideStyle引导框的位置绝对定位Stringtop: 70px; left: -193px;top: 62px; right: 4px;title指引标题Stringcontent指引内容StringlineStyle引导线的位置绝对定位Stringtop: -15px;left: 40px;.原创 2021-07-09 15:42:57 · 1549 阅读 · 1 评论 -
前端实现数字千分位标注
字符串划分千分位原创 2020-03-24 00:34:01 · 2730 阅读 · 0 评论 -
vue路由跳转页面带参数，刷新时页面参数丢失
页面路由跳转传递参数方式：注意query里面的不要写对象，写具体的参数，不然传过去下一个页面后，参数刷新就会变成[object,object]。具体的参数的值先用JSON.stringify转，再接受的时候转回来。用JSON.parse把获取到的参数转。这样刷新就不会丢失了。...原创 2020-09-25 16:01:16 · 1169 阅读 · 0 评论 -
关于CSS的盒子模型
标准盒模型标准盒模型的width和height属性的范围只包含了content。box-sizeing: content-box。IE盒模型（怪异盒模型）IE盒模型的width和height属性的范围包含了border、padding和content。今天和朋友讨论了一个问题：给div加添加宽高和背景图、border，边框和背景图谁在上面；一开始我以为这个涉及到图层绘制的先后问题，没找到正解。然后我们做了一的demo，其样式的写法是width: 600px;height: 500px.原创 2021-10-29 16:16:12 · 113 阅读 · 0 评论 -
个人中心下滑动画
核心代码部分template 模块<view> <view class="back"> <image class="back_img" src="https://636f-cold-452cb-1302899859.tcb.qcloud.la/back.jpg?sign=ddb32c9a09a0b05e57629325f80952d1&t=1607398831" mode="aspectFill"></image> <.原创 2020-12-10 17:06:31 · 179 阅读 · 0 评论 -
el-table表格实现分页记录上一次的选择，回显默认值选择
背景：最近项目做一个弹窗，里面涉及表格的选择，因为有表格出现分页，所以需要记住上一页的选择，当有默认值的时候，再次打开弹窗需要复现选择。难点：当用户选择操作后，点击取消关闭弹窗，此时再次打开没有清空上一次弹窗的选择；当采用el-table自带的this.$refs.multipleTable.clearSelection()去清空上一次弹窗的选择时，会清空已选中存在的值。解决方案：（1） 首先el-table如何实现表格多选? <el-table :data="listDa.原创 2021-05-26 13:59:43 · 1064 阅读 · 0 评论 -
微信小程序转成uniapp的h5，请求遇到跨域问题
有两种解决方案第一种：直接运行在uniapp的内置浏览器中，不会遇到跨域问题第二种：在manifest.json的源码中配置h5的跨域代理"h5":{ "devServer":{ "port":8080, "disableHostCheck":true, "proxy": { "/api/v1": { "target": "https://xxxxx.cn/", "changeOrigin":true, "secure":false原创 2020-10-21 17:22:16 · 1501 阅读 · 2 评论 -
动画效果实现拖动替换
<template> <view class="page"> <!-- 顶部栏 --> <view class="navigate_top"> <view class="indextop_iconleft font" @click="backpage"><text></tex...原创 2020-04-17 15:09:51 · 396 阅读 · 0 评论 -
实现手机通讯录（姓名按首字母排序）
先上效果图样式是采用的colorUI里的，难点在如果把后台返回来的数据按照首字母拼音去分类，主要是获取拼音的首字母！！！上传一部分关键代码，需要全部代码的可以去我的github上拉取；Page({ data: { classId: '', StatusBar: getApp().globalData.StatusBar, CustomBar: getApp()....原创 2020-03-24 10:47:35 · 4441 阅读 · 2 评论 -
首次gitlab提交项目步骤
git add .git commit -m ‘first’git remote add origin https://gitlab.zqgame.com/xxxxxx.gitgit push -u origin master如果出现不能直接push到master分支，即无权限可以尝试下面两种命令后git pushgit pull origin master --allow-unrelated-historiesgit push --set-upstream origin master..原创 2020-08-21 14:16:23 · 1094 阅读 · 0 评论 -
JS时间戳转为标准时间（以毫秒时间戳做转换），如果时间戳是秒请加上000（三个零）
export function FormData(date) { console.log(date) let s = new Date(date) let y = s.getFullYear() let m = (s.getMonth() + 1) < 10 ? '0' + (s.getMonth() + 1) : (s.getMonth() + 1) let dd = s.getDate() < 10 ? '0' + s.getDate() : s.ge原创 2021-01-03 15:29:25 · 1780 阅读 · 2 评论 -
mongodb的详细使用教程
标题MongoDB使用教程一、安装1 下载 MongoDB 的安装包选择安装包类型为msi，点击下载二、设置1.win+S搜索cmd右键命令提示符，注意这里必须以管理员身份打开，否则后续配置服务会出错误：Error connecting to the Service Control Manager2.输入以下命令，设置服务1. D:2. cd D:\Tools\MongoDB\Server\4.2\bin3. mongod --dbpath "D: \MongoDB\Server\4原创 2020-08-02 13:23:21 · 4135 阅读 · 0 评论