移动端开发
Mr_Chao1791
这个作者很懒,什么都没留下…
展开
-
vue3 实现全屏 loading 加载动画
Loading.vue<template> <div class="loading-wrap"> <div v-if="mask" class="mask"></div> <div class="loading" v-cloak> <div class="load-cont"> <div class="line"></div> <div c.原创 2022-05-30 09:41:20 · 1866 阅读 · 1 评论 -
vue3 封装 Dialog 弹窗组件,支持返回promise
vue3 封装 Dialog 弹窗组件,支持返回promiseDialog .vue<template> <div class="loading-wrap"> <div v-if="mask" class="mask"></div> <div class="loading" v-cloak> <div class="load-cont"> <div class="line"&g原创 2022-05-30 09:32:49 · 1252 阅读 · 0 评论 -
vue3 封装 toast组件
vue3 setup语法糖封装 toast 组件原创 2022-05-30 09:22:33 · 1201 阅读 · 0 评论 -
微信小程序 textarea 组件中 手机软键盘挡住内容的处理方案
微信小程序 textarea 组件中 手机软键盘挡住内容的处理方案查看开发文档设置并增大 cursor-spacing的值,可以完美处理textarea内容被键盘遮挡问题原创 2022-03-22 08:29:07 · 1459 阅读 · 0 评论 -
随机字符串码_永不重复(时间戳_随机数_随机码)
根据时间戳生成随机永不重复的随机字符串编码生成规则: 时间戳 + 随机数 + 随机码export const getRandomCode = () => { var length = 10; var data = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R",原创 2022-02-22 09:30:04 · 1018 阅读 · 0 评论 -
url(网络图片)转base64图片编码
将网络图片转换为base64编码的图片做自定义处理export function getBas64(url, outputFormat = 'image/jpg') { return new Promise((resolve) => { let canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image, dataURL = null原创 2022-02-22 09:25:56 · 845 阅读 · 0 评论 -
(px转rem)正则表达式匹配 px 像素单位转换为 rem
将字符串中的px单位转换为rem单位做移动端适配/** * @description: 正则表达式匹配 px 像素单位转换为 rem * @params : str 字符串,width 基数 */export const pxToRem = (str, width = 37.5) => { var reg = /(:")+(\d+(\.\d*)?)+(px")/gi; //可以匹配浮点数 let newStr = str.replace(reg, function (_x) {原创 2022-02-22 09:24:07 · 817 阅读 · 0 评论 -
获取url中的参数
通过正则表达式匹配url中的参数/** * 获取url中的参数 * @param {key} 待匹配的关键字 * @param {url} 被匹配查询的url */export const getUrlQuery = ({ key, url }) => { let str = url || location.href//默认获取浏览器地址栏中的url let reg = decodeURIComponent((new RegExp('[?|&|/]' + key +原创 2022-02-22 09:22:18 · 463 阅读 · 0 评论 -
利用cookie记录状态(今日/N天内不提醒,免登录)
状态设置成功后将状态值存入cookie中,设置过期时间(有需要时可重新赋值更新过期时间) //5天后过期 setCookieFiveDays: function (name, value, days = 5) { let expiresTime = new Date(); expiresTime.setTime(expiresTime.getTime() + 1000 * 60 * 60 * 24 * days); document.cookie = name + '=' .原创 2022-02-22 09:15:59 · 255 阅读 · 0 评论 -
移动端H5及微信公众号实现人脸识别的可行性demo
实现思路1.利用手机的前置摄像头获取视频流2.利用第三方插件tracking.js捕获人脸部分3.捕获到人脸后利用canvas绘制带人脸的照片(业务需要:转为base64编码)4.将绘制带人脸的照片和其他数据上传到第三方校验平台进行识别对比校验5.结束完工 (getUserMedia要在https的安全域名下使用)html<!DOCTYPE html><html lang=en style="font-size: 37.5px"><head> &l原创 2021-08-13 13:22:34 · 3806 阅读 · 0 评论 -
仿ios菜单导航栏
模仿ios 菜单导航栏,点击菜单跳转函数 /** * @Description: 浮动菜单 * @params: menus: Array 菜单列表 [ {name: '', href: "", icon: "" }] * @return: { } * <div class="float-ball-box"> <div class="float-ball-box-layer">原创 2021-06-25 17:12:26 · 732 阅读 · 0 评论 -
加载动画函数(loadingToast)
自己封装的一个 loading 弹窗,以函数的形式展现函数/** * @Description: 加载动画 * @params: text: String 文本 * @params: duration:Number 延迟时间(s) 默认1500 * @params: canClick:Boolean 是否可点击页面 默认 true * @return: { close() } * <div class="loading-box">原创 2021-06-25 16:58:54 · 380 阅读 · 0 评论 -
H5常见问题及解决方法(二)
iOS 滑动不流畅iOS 上拉边界下拉出现白色空白页面放大或缩小不确定性行为click 点击穿透与延迟软键盘弹出将页面顶起来、收起未回落问题iPhone X 底部栏适配问题保存页面为图片和二维码问题和解决方案微信公众号 H5 分享问题H5 调用 SDK 相关问题及解决方案H5 调试相关方案与策略六:iPhone X系列安全区域适配问题现象:头部刘海两侧区域或者底部区域,出现刘海遮挡文字,或者呈现黑底或白底空白区域。原因:iPhone X 以及它以上的系列,都采用刘海屏设计和全面屏.原创 2020-07-14 08:34:27 · 589 阅读 · 0 评论 -
H5常见问题及解决方法(一)
iOS 滑动不流畅iOS 上拉边界下拉出现白色空白页面放大或缩小不确定性行为click 点击穿透与延迟软键盘弹出将页面顶起来、收起未回落问题iPhone X 底部栏适配问题保存页面为图片和二维码问题和解决方案微信公众号 H5 分享问题H5 调用 SDK 相关问题及解决方案H5 调试相关方案与策略 一. iOS 滑动不流畅表现: 上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动。整体表现就是滑动不流畅,没有滑动惯性。1.在滚动容器上增加滚动 touch 方法方案:将-we.原创 2020-07-14 08:26:52 · 1197 阅读 · 0 评论 -
移动端 h5页面 长安保存图片到手机
本文使用使用 html2canvas.min.js 插件业务需要,这里我先将图片转译为base64,然后项html 片段替换为 绘制的 img图片// An highlighted block//手指长按事件 var timeOutEvent; document.querySelector("#share-qr-content").addEventListener("touchstart", function (e) { //开启定时器前先清除定时器,防止原创 2020-07-07 13:25:21 · 4303 阅读 · 0 评论 -
使用弹性布局 flex实现顶部固定,内容滚动
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar原创 2020-07-07 13:39:47 · 3435 阅读 · 0 评论