前端
航老板不想敲代码
这个作者很懒,什么都没留下…
展开
-
VUE 宫格 跑马灯抽奖
vue实现 宫格跑马灯 抽奖原创 2022-10-20 16:46:09 · 645 阅读 · 2 评论 -
js 滚动元素 居中可视区域内
$refs.nowCard[0]. //v-for 循环出的dome 元素 ref=‘xx’ xx[0]block: 'center', // 上边框与视窗顶部平齐。behavior: 'smooth', // 平滑过渡。原创 2022-09-02 10:30:47 · 678 阅读 · 0 评论 -
js 数组对象 将相同属性的对象重新组合到一起
/ 按照特定的参数将数组排序将具有相同值得排在一起 这里排序。// 方案数据 重整合 按str=时间time字段相同。// 将相同类别的对象添加到统一个数组。// 将最后的内容推出新数组。原创 2022-08-31 11:21:05 · 668 阅读 · 0 评论 -
js预加载图片
解决图片过大 因网络原因图片加载过慢影响效果 所以要预加载图片原创 2022-06-16 09:55:13 · 67 阅读 · 0 评论 -
微信小程序 下载视频 图片
//保存图片saveImg(){wx.downloadFile({url:'https://........',success:function(res){console.log(res)wx.saveImageToPhotosAlbum({ //视频 替换wx.saveVideoToPhotosAlbum...原创 2022-03-02 11:56:25 · 752 阅读 · 0 评论 -
js 处理 url 转换blob 浏览器下载
function xhrequest(callback) { let url ="https://img-blog.csdnimg.cn/20210618103325153.png"; //文件地址 let data = await fetch(url) .then((response) => response.blob()) .then((res) => { console.log...原创 2022-03-02 10:57:14 · 916 阅读 · 0 评论 -
css伪类元素 添加 选中下划线 自定义长度
.actived::after { content: ''; position: absolute; width: rem(49); // 边框的宽度 height: rem(6); border-radius: rem(3); left: 50%; //距离 view 标签的距离 bottom: rem(-8); ...原创 2022-02-10 14:07:38 · 958 阅读 · 0 评论 -
es6 数组去重
// 去除数组的重复成员[...new Set(array)]原创 2022-01-04 10:46:03 · 520 阅读 · 0 评论 -
vue 滚动列表 兼容移动端 自适应高度
computed: { styleVar() { let h = this.hieght - 37; return 'height:' + h + 'px'; }, },//列表自适应高度 listHeight() { let h = 0; let contentHeight = 0; if (window.innerHeight) { h = wi...原创 2021-12-24 16:35:27 · 655 阅读 · 0 评论 -
vue 横向滚动条 实现点击 元素滚动可视区域居中 效果
模拟vant的Tab标签页的标签滚动效果效果:选中元素,在滚动条的可视区域里面自动居中,头尾两端不用居中vant效果:https://youzan.github.io/vant/#/zh-CN/tabstart() { /** * 1)先让选中的元素滚到可视区域的最左边 scrollLeft * 2)接着向右移动容器一半的距离 containWidth / 2 * 3)最后向左移动item一半的距离 offsetWi...原创 2021-12-23 17:19:54 · 3679 阅读 · 1 评论 -
js 获取窗口高度 兼容 各种浏览器
windowHight() { let h = 0 if (window.innerHeight) { h = window.innerHeight; //Mozilla } else if (document.documentElement.clientHeight) { h = document.documentElement.clientHeight...原创 2021-12-20 15:29:10 · 201 阅读 · 0 评论 -
js 获取 元素高度
js 获取 元素高度原创 2021-12-16 17:23:02 · 602 阅读 · 0 评论 -
vue 动态 改变 标签样式 赋值
<div class="body" :style="styleVar" ></div>computed: { styleVar() { let h = 48.5 return 'height:' + h + 'px' } },原创 2021-12-16 17:16:47 · 542 阅读 · 0 评论 -
js 控制容器 滚动条 距顶部 距离
//滚动条 到底 scroll() { this.$nextTick(() => { setTimeout(() => { console.log('滚动'); let scrollTop = this.$el.querySelector(".body"); console.log('...原创 2021-12-16 17:13:27 · 1302 阅读 · 0 评论 -
js 监听 滚动条 距低 数值
<div @scroll="scrollEvent($event)"></div>//监听滚动条高度 scrollEvent(e) { let scrollBottom = e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight; ...原创 2021-12-16 17:10:52 · 263 阅读 · 0 评论 -
vue 移动端 图片超出限制 以长边缩放图片
//缩放图片 smallImg: function (w, h) { let maxW = 272, //图片的最大限制宽 maxH = 290, //图片最大限制高 nowW = Number(w), //当前图片宽 nowH = Number(h), //当...原创 2021-12-15 10:25:00 · 1311 阅读 · 0 评论 -
vue 改变数据 页面渲染没有变化
需要手动 调用this.$forceUpdate(); 方法原创 2021-12-08 16:25:18 · 457 阅读 · 0 评论 -
Vue 动态获取元素高度
getTitleHeight() { this.$nextTick(function () { this.contentHeight = document.getElementsByClassName("topColumn")[0].clientHeight; console.log(this.contentHeight); //元素高度 }) },...原创 2021-12-07 16:46:40 · 2095 阅读 · 0 评论 -
小程序scroll-view 页面加载固定元素到可视区域
原创 2021-11-29 15:45:05 · 505 阅读 · 0 评论 -
微信小程序弹窗 穿透背景滚动
在蒙版层 /最外层添加属性catchtouchmove="preventTouchMove"原创 2021-09-03 17:12:29 · 136 阅读 · 0 评论 -
微信小程序 inpu框 层级穿透 解决
先看 出现的问题直接透过底部 固定定位 显示出来 而旁边的则没穿透解决方案替换标签 并且 z-index:99999原创 2021-09-01 11:54:57 · 193 阅读 · 0 评论 -
微信小程序 在wxml写过滤器 脱敏手机号
献上代码<wxsmodule="phone">vartoHide=function(array){varmphone=array.substring(0,3)+'****'+array.substring(7);returnmphone;}module.exports.toHide=toHide;</wxs>...原创 2021-09-01 11:50:04 · 574 阅读 · 0 评论 -
小程序iphonex全面屏/非全面屏 fixed 固定底部兼容问题
position:fixed;left:0;//不完全固定底部bottom:calc(20rpx(距底部高度) +constant(safe-area-inset-bottom)); bottom:calc(20rpx(距底部高度)+env(safe-area-inset-bottom));//完全固定底部//bottom:constant(safe-area-inset-bottom);//bottom:env...原创 2021-08-24 17:31:36 · 817 阅读 · 0 评论 -
小程序textarea在IOS有默认padding
textarea 标签添加属性disable-default-padding="{{true}}"原创 2021-08-23 16:42:22 · 498 阅读 · 0 评论 -
vue 移动端苹果input框自带上阴影 解决
input{outline:none;-webkit-appearance:none;/*去除系统默认的样式*/-webkit-tap-highlight-color:rgba(0,0,0,0);/*点击高亮的颜色*/}...原创 2021-07-05 16:02:47 · 183 阅读 · 0 评论 -
js 数组去重
arr1 = [1, 1, 2, 3, 4, 3, 1]let set1 = new Set(arr1)返回的是一个类数组,就是类似于数组但是实际上原型是Objectconsole.log(set1) // Set(4) {1, 2, 3, 4}可以利用Array.from来将他转成真正的数组let newArr = Array.from(set1)console.log(newArr) 此时他就是一个去重完毕的数组也可以使用解构赋值let newArr2 = [......原创 2021-06-28 09:48:01 · 40 阅读 · 0 评论 -
js 控制字符串长度 区分中英文
function getStringLength (str) { let len = 0; for (let i = 0; i < str.length; i++) { if (str.charAt(i).match(/[\u4e00-\u9fa5]/g) != null) len += 2; else len += 1; } return len;}原创 2021-06-22 14:27:33 · 179 阅读 · 0 评论 -
css 子元素覆盖父元素内边框阴影 解决办法
父元素用添加伪类元素方法 添加一个阴影样式 定位到父元素上方 代码:.parent::after{content:'';position:absolute;left:rem(0);right:rem(0);top:rem(0);bottom:rem(0);border-radius:8px...原创 2021-06-16 17:56:53 · 2222 阅读 · 2 评论 -
js 数组对象 去重
const arr = [{name:‘zhangsan‘,age:12},{name:‘lisi‘,age:14},{name:‘zhangsan‘,age:12},{name:‘lisi‘,age:1...原创 2021-06-03 11:25:59 · 51 阅读 · 0 评论 -
JS 判断是 手机端 还是PC端
if(/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)){console.log('是手机');}else{console.log('不是手机');}原创 2021-05-27 10:58:20 · 72 阅读 · 0 评论 -
vue如何写 ios 分享 嵌入页 调用函数
原创 2021-05-26 11:48:35 · 118 阅读 · 0 评论 -
less 多行溢出显示省略号无效 js 处理多行文本溢出显示...
用less 写 多行文本溢出处理的时候,会发现根本不起作用:如下 overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;...原创 2021-05-25 14:44:12 · 561 阅读 · 0 评论 -
vue 文案 加空白占位符
  == 普通的英文半角空格  == ==   == no-break space (普通的英文半角空格但不换行)  == 中文全角空格 (一个中文宽度)  ==   == en空格 (半个中文宽度)  ==   == em空格 (一个中文宽度)  == 四分之一em空格 (四分之一中文宽度).原创 2021-05-23 11:17:00 · 266 阅读 · 0 评论 -
JS 时间戳转换为 天:时:分:秒
代码!!! 如下:formatSeconds(value){vartheTime=parseInt(value);//需要转换的时间秒vartheTime1=0;//分vartheTime2=0;//小时vartheTime3=0;//天if(theTime>60){...原创 2021-05-21 15:54:26 · 574 阅读 · 0 评论 -
H5 移动端 ui图字号小于12px字号 解决办法
很多时候 ui图上会根据同一个区域根据不同字数来设置不同的字体大小,有时候会出现设计图字号小于移动端最小字号的问题。即使设置了小子号也不会缩小解决办法!使用缩放!!!代码:transform: scale(.8); //缩放比例transform-origin: left; //缩放中心点,默认是center 以中心点缩放...原创 2021-05-20 13:30:29 · 2059 阅读 · 0 评论 -
vue 移动端 安卓手机出现 lineheight=height 垂直不居中问题
vue 移动端 安卓手机出现 lineheight=height 垂直不居中问题建议采用 弹性布局的方式 实现居中display:flex;align-items:center;justify-content:center;原创 2021-05-20 13:19:09 · 315 阅读 · 0 评论