qq_40509733的博客

原创 VUE 宫格 跑马灯抽奖

vue实现 宫格跑马灯 抽奖

原创 js 滚动元素 居中可视区域内

$refs.nowCard[0]. //v-for 循环出的dome 元素 ref=‘xx’ xx[0]block: 'center', // 上边框与视窗顶部平齐。behavior: 'smooth', // 平滑过渡。

原创 js 数组对象 将相同属性的对象重新组合到一起

/ 按照特定的参数将数组排序将具有相同值得排在一起 这里排序。// 方案数据 重整合 按str=时间time字段相同。// 将相同类别的对象添加到统一个数组。// 将最后的内容推出新数组。

原创 js预加载图片

解决图片过大 因网络原因图片加载过慢影响效果 所以要预加载图片

原创 微信小程序 下载视频 图片

//保存图片saveImg(){wx.downloadFile({url:'https://........',success:function(res){console.log(res)wx.saveImageToPhotosAlbum({ //视频 替换wx.saveVideoToPhotosAlbum...

原创 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...

原创 css伪类元素 添加 选中下划线 自定义长度

.actived::after { content: ''; position: absolute; width: rem(49); // 边框的宽度 height: rem(6); border-radius: rem(3); left: 50%; //距离 view 标签的距离 bottom: rem(-8); ...

原创 es6 数组去重

// 去除数组的重复成员[...new Set(array)]

原创 vue 滚动列表 兼容移动端 自适应高度

computed: { styleVar() { let h = this.hieght - 37; return 'height:' + h + 'px'; }, },//列表自适应高度 listHeight() { let h = 0; let contentHeight = 0; if (window.innerHeight) { h = wi...

原创 vue 横向滚动条 实现点击 元素滚动可视区域居中 效果

模拟vant的Tab标签页的标签滚动效果效果：选中元素，在滚动条的可视区域里面自动居中，头尾两端不用居中vant效果：https://youzan.github.io/vant/#/zh-CN/tabstart() { /** * 1)先让选中的元素滚到可视区域的最左边 scrollLeft * 2)接着向右移动容器一半的距离 containWidth / 2 * 3)最后向左移动item一半的距离 offsetWi...

原创 js 获取窗口高度 兼容 各种浏览器

windowHight() { let h = 0 if (window.innerHeight) { h = window.innerHeight; //Mozilla } else if (document.documentElement.clientHeight) { h = document.documentElement.clientHeight...

原创 js 获取 元素高度

js 获取 元素高度

原创 vue 动态 改变 标签样式 赋值

<div class="body" :style="styleVar" ></div>computed: { styleVar() { let h = 48.5 return 'height:' + h + 'px' } },

原创 js 控制容器 滚动条 距顶部 距离

//滚动条 到底 scroll() { this.$nextTick(() => { setTimeout(() => { console.log('滚动'); let scrollTop = this.$el.querySelector(".body"); console.log('...

原创 js 监听 滚动条 距低 数值

<div @scroll="scrollEvent($event)"></div>//监听滚动条高度 scrollEvent(e) { let scrollBottom = e.target.scrollHeight - e.target.scrollTop - e.target.clientHeight; ...

原创 vue 移动端 图片超出限制 以长边缩放图片

//缩放图片 smallImg: function (w, h) { let maxW = 272, //图片的最大限制宽 maxH = 290, //图片最大限制高 nowW = Number(w), //当前图片宽 nowH = Number(h), //当...

原创 vue 改变数据 页面渲染没有变化

需要手动 调用this.$forceUpdate(); 方法

原创 Vue 动态获取元素高度

getTitleHeight() { this.$nextTick(function () { this.contentHeight = document.getElementsByClassName("topColumn")[0].clientHeight; console.log(this.contentHeight); //元素高度 }) },...

原创 小程序scroll-view 页面加载固定元素到可视区域

原创 微信小程序弹窗 穿透背景滚动

在蒙版层 /最外层添加属性catchtouchmove="preventTouchMove"

原创 微信小程序 inpu框 层级穿透 解决

先看 出现的问题直接透过底部 固定定位 显示出来 而旁边的则没穿透解决方案替换标签 并且 z-index：99999

原创 微信小程序 在wxml写过滤器 脱敏手机号

献上代码<wxsmodule="phone">vartoHide=function(array){varmphone=array.substring(0,3)+'****'+array.substring(7);returnmphone;}module.exports.toHide=toHide;</wxs>...

原创 小程序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...

原创 小程序textarea在IOS有默认padding

textarea 标签添加属性disable-default-padding="{{true}}"

原创 vue 移动端苹果input框自带上阴影 解决

input{outline:none;-webkit-appearance:none;/*去除系统默认的样式*/-webkit-tap-highlight-color:rgba(0,0,0,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 = [......

原创 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;}

原创 css 子元素覆盖父元素内边框阴影 解决办法

父元素用添加伪类元素方法 添加一个阴影样式 定位到父元素上方 代码：.parent::after{content:'';position:absolute;left:rem(0);right:rem(0);top:rem(0);bottom:rem(0);border-radius:8px...

原创 js 数组对象 去重

const arr = [{name:‘zhangsan‘,age:12},{name:‘lisi‘,age:14},{name:‘zhangsan‘,age:12},{name:‘lisi‘,age:1...

原创 JS 判断是 手机端 还是PC端

if(/(iPhone|iPad|iPod|iOS|Android)/i.test(navigator.userAgent)){console.log('是手机');}else{console.log('不是手机');}

原创 vue如何写 ios 分享 嵌入页 调用函数

原创 less 多行溢出显示省略号无效 js 处理多行文本溢出显示...

用less 写 多行文本溢出处理的时候，会发现根本不起作用：如下 overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;...

原创 vue 文案 加空白占位符

&#32; == 普通的英文半角空格&#160; == &nbsp; == &#xA0; == no-break space （普通的英文半角空格但不换行）&#12288; == 中文全角空格 （一个中文宽度）&#8194; == &ensp; == en空格 （半个中文宽度）&#8195; == &emsp; == em空格 （一个中文宽度）&#8197; == 四分之一em空格 （四分之一中文宽度）.

原创 JS 时间戳转换为 天:时：分：秒

代码！！！ 如下：formatSeconds(value){vartheTime=parseInt(value);//需要转换的时间秒vartheTime1=0;//分vartheTime2=0;//小时vartheTime3=0;//天if(theTime>60){...

原创 H5 移动端 ui图字号小于12px字号 解决办法

很多时候 ui图上会根据同一个区域根据不同字数来设置不同的字体大小，有时候会出现设计图字号小于移动端最小字号的问题。即使设置了小子号也不会缩小解决办法！使用缩放！！！代码：transform: scale(.8); //缩放比例transform-origin: left; //缩放中心点，默认是center 以中心点缩放...

原创 vue 移动端 安卓手机出现 lineheight=height 垂直不居中问题

vue 移动端 安卓手机出现 lineheight=height 垂直不居中问题建议采用 弹性布局的方式 实现居中display:flex;align-items:center;justify-content:center;