自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(40)
  • 收藏
  • 关注

原创 Vue 相关开源项目库

git地址:https://github.com/rumengkai/awesome-vue

2020-07-13 13:57:15 112

原创 循环里面有异步操作,返回异步操作的数据

如图上面结果显示,异步操作更改原数组时只对异步函数内有效,对异步函数外并无作用,此时需要用到Promise对象,使异步转同步执行,如下:​function pushData(arr, value) { return new Promise((reslove) => { setTimeout(() => { ...

2019-06-06 16:02:45 604

原创 console.log格式化打印

console.log支持的格式标志有:占位符 描述 %s 字符串 %d%i 整数 %f 浮点数 %o/%O Object对象 %c css样式

2021-05-07 17:28:46 477

原创 数组排序(升序)

自己想的数组排序:只做记录不做参考从第一次开始比较找出数组中最小数,取出来放入一个新数组并且在原始数组中删掉这个最小数,依次类推找到最后一个(性能不好) var arr = [45, 90, 32, 45, 33, 2, 90, 100, 36]; var loop = arr.length; var target = []; for (var i = 0; i < loop; i++) { var min = arr[0], k = 0;

2021-04-23 18:54:24 3563

原创 去掉input[type=“number“]的默认样式

input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !important; }/* chrome */input[type="number"]{ -moz-appearance:textfield;}/* firefox */

2021-02-20 13:38:06 303

原创 forEach 终止循环

try { //终止forEach循环 let keyArr = [1,2,3,4,5,6,7]; keyArr.forEach((item)=>{ if (statusCount[item]) { this.callStatusName = item; throw new Error("End"); } }) ...

2021-01-27 14:45:21 3798

原创 秒转换成时分

方式一:function duration(time) { if (!time) return ''; //分钟, 秒 let minute = '', seconds = ''; seconds = Math.round(time * 100) / 100 + '"'; // 四舍五入保留两位小数 if (time > 59) { minute = parseInt(time / 60) + "'"; if (Math.round(time % 60) &g

2020-09-29 17:20:01 394

原创 GoJS 初实例

<!DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width,initial-scale=1"><title>DraggableLink</title><metaname="description"content="Dragalinktoreconnect...

2020-07-17 18:39:27 491

原创 微信小程序 类似点餐系统功能

<!--index.wxml--><view class="container"> <scroll-view> <view bindtap="touchOnGoods" wx:key="keys" class="goods" hover-class="goods_hover" wx:for="{{goods_list}}"> <image src="https://dss0.bdstatic.com/70cFuHSh_Q1Yn.

2020-06-04 17:51:10 393

原创 微信小程序 picker组件自定义选择时间粒度

一个类似用车时间的粒度选择功能:如图所示代码如下://wxml<picker class='address-detail' mode="multiSelector" bindcolumnchange="bindcolumnChange" bindchange="bindChange" value="{{dateIndex}}" range="{{dateArray}}"> <view class="picker"> <view class="flex

2020-06-04 16:35:57 586

原创 javascript中offsetWidth,clientWidth,innerWidth相关

元素属性和元素方法都通过elem.属性或elem.方法的方式使用,window属性通过window.属性的方式使用,document属性则通过document调用。<script> /* 1,元素视图属性 * offsetWidth 水平方向 width + 左右padding + 左右border-width * offsetHeight 垂直方向 height + 上下padding + 上下border-width * ...

2020-06-02 14:50:32 199

原创 js 获取浏览器滚动条的宽度

function getScrollbarWidth() { var odiv = document.createElement('div'),//创建一个div styles = { width: '100px', height: '100px', overflowY: 'scroll'//让他有滚动条 }, i, scrollbarWidth; for (.

2020-06-01 18:09:27 552

原创 微信小程序 手指拖动切换下一张

效果图:index.wxml:<view class="mask-movable"> <image style="position:absolute;z-index:-1;height: 600rpx; width: 492rpx;" mode='scaleToFill' src='{{img2}}'></image> <movable-area wx:if="{{hiddenimg}}" style="height: 160vh; widt

2020-05-25 18:19:32 358

原创 小程序卡片轮播效果

如图上效果:实现代码如下:index.wxml<view class="container"> <swiper class="imageContainer" bindchange="handleChange" previous-margin="50rpx" next-margin="50rpx" circular autoplay> <block wx:for="{{3}}" wx:key="{{index}}"> <swi..

2020-05-25 18:04:05 504

原创 javascript之鼠标事件大全

js鼠标事件大全一般事件事件 浏览器支持 描述onClick HTML: 2 | 3 | 3.2 | 4 Browser: IE3 | N2 | O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标双击事件onMouseDown HTML: 2 | 3 | 3.2 | 4 Browser: IE4 | N4 | O 鼠标上的按钮被按下了onMouseUp HTML: 2 .

2020-05-25 16:17:43 329

原创 jquery实现跑马灯效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script language="javascript" t.

2020-05-25 16:15:52 510

原创 audio在手机端不能自动播放

<audio id="music" autoplay="true" loop="loop" class="audioMusicBtn media-audio" controls="controls" preload src="images/music.mp3"></audio>function audioAutoPlay(id){  var audio = document.getElementById(id),    play = function(){      aud.

2020-05-25 14:25:28 245

原创 图片压缩利器

网址:https://tinypng.com/

2020-05-06 15:48:49 158

原创 JQuery实现点击查看大图

网页中插入的图片大小都是按照图片的原始尺寸在展示的,如果图片太大完全超出手机的屏幕尺寸,需要响应式处理一下图片(将宽设为设备的宽,高度自适应),通常使用img,当图片过小为了不让其被拉伸造成图片失真的情况会设置max-width:100%这里主要是获取图片的真实大小。imgW,imgH。这里不能直接去获取图片的宽度高度$(".imgBox").width(),$('.imgclass').h...

2020-04-30 17:29:16 722

原创 小程序 隐藏scroll-view滚动条

在wxss添加:::-webkit-scrollbar{width: 0;height: 0;color: transparent;}

2019-12-13 18:39:16 113

原创 vue中使用echarts自定义主题

1、安装echartsnpm i echarts -S2、在main.js里引入 echarts 主题的 js(一般在node_modules---echarts---theme---macarons.js) theme里边有各种各样的主题,任意选一种,例如:macarons,然后引入:import'echarts/theme/macarons.js'// 或者...

2019-11-06 16:51:44 2089

原创 浏览器滚动的两种方式

1, auto: 默认值, 平时我们网页上看到的滚动就是auto这个属性2,smooth:平滑滚动保证兼容性进行如下设置:html,body{ scroll-behavior: smooth;}平时我们想要简单的锚点跳转达到平滑滚动的效果,设置此属性便可轻松解决~~~~~~当然你也可以利用动画通过设置scrollTo()来实现平滑滚动,而且动画可以实现复杂的逻辑判断进而达到...

2019-11-01 17:43:58 587 1

原创 解决ios input失去焦点收起键盘后页面无法归位

document.body.addEventListener('focusout', () =>{ // 软键盘关闭事件 window.scroll(0,0) // 失焦后强制让页面归位 })

2019-11-01 17:24:06 961

原创 jQuery手动拖动进度条

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>jQuery手动拖动进度条</title&g...

2019-08-19 14:03:46 317

原创 html 表格导出到Excel

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"...

2019-08-19 14:02:06 234

转载 ES6之Promise

一 什么是Promise什么是Promise呢?以下是MDN对Promise的定义The Promise object is used for asynchronous computations. A Promise represents a single asynchronous operation that hasn't completed yet, but is expected...

2019-07-17 18:09:05 86

原创 event对象中pageX/Y,clientX/Y,screenX/Y,offsetX/Y区别

由鼠标事件(MouseEvent)可以发现:1、clientX、clientY点击位置距离当前body可视区域的x,y坐标2、pageX、pageY对于整个页面来说,包括了被卷去的body部分的长度3、screenX、screenY点击位置距离当前电脑屏幕的x,y坐标4、offsetX、offsetY相对于带有定位的父盒子的x,y坐标5、x、y和screenX、sc...

2019-06-20 16:11:09 511

原创 Cookie和Session,Cookie和webStorage 区别

Cookie概念:Cookie由服务器端生成,发送给user-Agent(一般是浏览器,服务器告诉浏览器设置一下cookie),浏览器会将cookie以key/value保存到某个目录的文本文件内,下次请求同意网站时就发送该cookie给服务器(前提是浏览器设置为启用cookie)cookie通过HTTP请求报文和响应报文配合完成。cookie 的不可跨域名性cookie是存于用户硬盘的...

2019-06-14 10:23:12 169

原创 mpvue 开发小程序蹲坑指南

mpvue:https://github.com/F-loat/mpvue-quickstartmpvue-entry插件:https://github.com/F-loat/mpvue-entry(集中式页面配置,自动生成各页面的入口文件,优化目录结构,支持新增页面热更新)mpvue-router-patch路由插件:https://github.com/F-loat/mpvue-ro...

2019-06-13 16:04:31 179

原创 普通函数和箭头函数的区别

箭头函数:let fun = () => {console.log('lalalala');}普通函数:function fun() {console.log('lalla');}箭头函数相当于匿名函数,并且简化了函数定义。箭头函数有两种格式,一种只包含一个表达式,连{ ... }和return都省略掉了。还有一种可以包含多条语句,这时候就不能省略{ ... }和...

2019-06-11 11:24:02 193

原创 微信小程序—多图片上传

小程序多图片上传,我们封装成一个自定义组件,方便后续开发调用,代码如下:<view class="weui-uploader upimg"> <view> <view class="weui-uploader__files"> <block wx:for-items="{{files}}" wx:key="{{index}}"...

2019-06-06 15:26:32 574

原创 微信小程序中类似后台添加商品规格的设置

类似于这样一个需求,添加一个商品规格属性的设置(增加,编辑集成一个页面)这是以下代码所实现的商品属性规格的数组:思路如下:<form bindsubmit="complete" report-submit="true"> <block wx:for="{{spec_arr}}" wx:key="{{index}}"> <view ...

2019-06-06 14:25:30 3571

原创 滑动时候警告:Unable to preventDefault inside passive event listener

解决办法1:在touch的事件监听方法上绑定第三个参数{ passive: false },通过传递 passive 为 false 来明确告诉浏览器:事件处理程序调用 preventDefault 来阻止默认滑动行为。elem.addEventListener( 'touchstart', fn, { passive: false });解决办法2: * { ...

2019-06-04 16:00:15 175

原创 解决ios打开微信小程序下拉页面出现空白

在page .json中进行配置,但注意如果页面内容超出页面本身高度则不能用disableScroll:true;否则会导致页面无法滚动.然而你可能也会遇到加上之后无效,则:disableScroll的优先级小于enablePullDownRefresh,因此如果app.json里是enablePullDownRefresh:true,那如果只是在page.json中加上disable...

2019-05-30 17:13:01 4855

原创 let,var区别

通过var定义的变量,作用域是整个封闭函数,是全域的 。通过let定义的变量,作用域是在块级或是子块中。for (let i = 0; i < 10; i++) { // ... } console.log(i); // ReferenceError: i is not defined //计数器i只在for循环体内有效,在循环体外引用就会报错。变量提升现象:浏览器在运行代码之前...

2019-03-01 18:00:59 111

原创 文本超出几行显示省略号

<view class='content'> <view class='c_text' id="box" style='-webkit-line-clamp:{{lineclamp}}'> 本酒店好霸道个地方不化的风格股的方法反反复复部分 地方改变地方vadfvdfjfbiiiuioulkdaflgvbdfgbvf 胡椒粉IDGV不vbfudio...

2019-03-01 17:53:02 214

原创 微信小程序—文字无线轮播、文字跑马灯效果

如图效果直接上代码,一看就懂啦~ 这里需要注意的是在小程序上style样式里面translate的单位rpx会无效,写成translateX( 空格 20rpx)就可以了<view class="warn"> <image src="{{IMG_URL}}/mod/coupon/assets/img/scenic/laba.png" style="width:...

2019-03-01 17:30:35 1603

原创 微信小程序—利用toggle实现列表的显示和隐藏

如图所示:如果想出现这种点击哪个元素让哪个元素显示,在点击隐藏而且点击列表之间互不影响的效果,可以利用在循环的列表上添加一个toggle键值作为开关在data里面定义一个数组,如图(仅是测试数据)在onload里面加上toggle开关在列表上绑定事件然后进行逻辑编写这种方法类似于多选还有一种效果就是点击其中一个其他都恢复成原样还用上面的列表,这个时候...

2019-03-01 17:20:43 1530

原创 Vue 个别手机或者 IOS8.2浏览器打不开,显示空白的解决方案

进入http://debugx5.qq.com/页面 打开调试vConsole功能(安卓手机)排查原因,会发现个别机型不支持es6的写法 将es6转换成es5调试,如果发现还是不行,经过测试最快的解决方法是 用iE浏览器的 edge版本,检查报错,一个错都不能有,全部清除报错 不兼容问题后这个时候发现了vue语法错误,因为我们框架支持混编写法,vue里面插入了类似这种...

2019-03-01 16:57:26 1885

原创 微信小程序—更改默认单,复选框样式

/*更改复选框的样式 */(小程序默认不让更改)未选中的 背景样式checkbox .wx-checkbox-input{border-radius: 8rpx;width: 28rpx;height: 28rpx;margin: 0 15rpx 4rpx 0;border-color: transparent;background: transparent;}...

2019-03-01 16:44:33 1089 2

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除