- 博客(71)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 基于vue页面的多个标题滑动吸顶与多选分页加载
最近做一个需求，产品要求一个发票列表可以多选发送到邮箱，而且分页加载，并且按照月份排序，滑动的时候月份的部分吸顶，先看看设计图吧。 由于整个项目都是基于vue开发的，项目里有的页面是用vux中的scroll组件实现分页的，看文档里这个组件都已经不维护了，所以用的是vue-infinite-scroll组件，分页就不用多说了。 这里有个多选与全选，如果点...
2020-04-16 15:44:03
1581
原创 小程序列表页tab切换swiper并滚动到上次位置
最近小程序做到一个很常见的需求，订单列表功能。虽说看着很常见，做起来也发现了有一些坑。效果如图：这里就是顶部tab页切换到不同状态的订单，下次切回来不刷新页面而且需要跳到上次浏览的地方，然后滑动每个页面对应的tab也能完成相应的切换。小程序的话很容易就想到swiper组件，然后滑动的当前swiper-item和tab的index对应起来就可以了。而且页面滑动页有对应的scroll-vie...
2020-01-07 10:49:14
3243
原创 移动端H5页面关于软键盘的一些踩坑记录
最近一个项目需要做一个留言的功能，需求很简单，点击留言按钮底部弹出留言框，然后发送留言给后台就行了，还有一个就是页面要实现复制功能。讨论需求的时候我预想到了手机上软键盘的弹出可能会有一些bug，不过需求比较急，就想着先做完再来改呗。很快做完之后，在电脑上测了没毛病，提测之后，bug刷刷的就来了：1、手机ios或者Android微信，点击留言弹出输入框，点击完成或者收起按钮，或者安卓手机点击自带...
2019-08-27 11:20:26
4356
1
原创 小程序海报分享之踩坑日记
最近项目需要添加小程序海报分享的功能，也就是可以生成商品图片和跳转商品详情页的小程序码（也叫菊花码），然后用户点击保存图片后，添加到手机相册，用户可以直接把已保存的图片发出来，其他人可以通过长按小程序码直接跳转到商品详情页。看起来比较普通的一个需求，上手做起来之后才会发现有各种各样的坑，下面就来看看遇到了那些坑吧。 一开始肯定是直接文档走起，小程序获取小程序码，刚开始...
2018-12-27 17:04:17
1725
原创 mpvue仿苹果滑动删除
最近项目在使用mpvue开发微信商城小程序和H5，不得不说美团点评的这款基于Vue的框架同时开发小程序和H5确实是还算好用的，基本上一套代码可以同时兼容微信小程序和H5页面，当然在一些特殊的地方还是需要做区分兼容的。需要从头开始看的可以看看这篇博客https://blog.csdn.net/Aimee1608/article/details/81084553。 在做到...
2018-11-21 11:42:58
838
原创 mpvue小程序商品规格选择
最近由于项目的需求，需要开发出一个基于mpvue框架的小程序商城。之前写过原生的小程序，所以还需要学习mpvue，由于需求很急，所以只有边学边开发了。商城自然离不开商品详情页，这个算是商城里面比较复杂的页面了，做到商品规格选择的时候看到后台返回的一系列数据简直头大了。 商品规格都在goodsSpecObj字段里面，然后里面各种键值对的字段；其中allOpenSp...
2018-09-16 15:54:47
2650
原创 百度云音视频直播全屏时与layer弹框冲突问题的解决
前段时间项目中做视频直播用到了百度云的音视频直播LSS，由于需求需要在pc端要加一些自定义的按钮，因此需要把百度云播放器放在页面弹框里面，而layer算是比较好用的一款弹框插件，做出的效果图如图：弹框下面还有截图的功能，截图是用H5的canvas能直接截取video标签里内容drawImage()方法，点击截图按钮效果如图：保存按钮直接上传到服务器，可以看到图一背景还引入了百度地图...
2018-03-23 15:04:45
999
原创 pod install报错踩坑记录
pod install报错LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443
2021-12-09 18:24:48
3785
原创 纯css设置border-width
常见的border设置一般都是直接类似1px solid #eee，但是在移动端上会发现这个1px的border显得很粗，如果直接设置0.5px的话，在ios里面的显示到还正常，不过有些安卓机不支持浮点数的的样式设置，这个时候就需要统一处理的，话不多说直接上代码吧，纯css设置border-width为0.5px，css代码如下： .input-wrap { position: relative; } .input-wrap::after{...
2020-06-11 10:06:25
711
原创 小程序多个swiper高度自适应
之前做个一个多个tab的列表页，每个tab下的内容对应的就是swiper，而小程序的swiper的高度默认是150px，不能自适应内容高度，最开始我们的列表内容每个卡片的高度都是差不多的，当时做的是把每个卡片高度固定400px，然后用固定的高度*每个tab下卡片的数量来得到每个swiper的高度，具体博客链接：https://blog.csdn.net/this_ITBoy/article/details/103869457。但是，后来出了新的需求，如图：可以看到，第一个卡片加入了物流的信息...
2020-05-29 13:57:39
831
原创 微信小程序开源源码，仿淘宝、京东、今日头条等
wx-gesture-lock微信小程序的手势密码WXCustomSwitch微信小程序自定义 Switch 组件模板WeixinAppBdNovel微信小程序demo：百度小说搜索shitoujiandaobu小程序：石头剪刀布（附代码说明）audiodemo微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义star微信小程序开发之五星评分swit...
2019-12-24 10:40:57
4295
2
原创 图片懒加载原理及实现
原理：先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。这样做能防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等。实现：<!DOCTYPE html...
2019-10-21 09:32:06
170
原创 原型链万能公式，关于__proto__和prototype的那些事
昨天在一个技术群里，有个小伙伴提出了这么个问题：Object.prototype.a = function () { console.log('a')}Function.prototype.b = function () { console.log('b')}function F(){}var f = new F();f.a();f.b();F.a();...
2019-08-15 17:25:10
459
原创 纯css实现横向滚动
前不久碰到一个需求，在宽度不固定下实现横线滚动，这里我用css来写，记录下来，供以后借鉴。子元素的宽度大于父元素是，会出现滚动 overflow-x: scroll; 为水平滚动，overflow-y: scroll; 为垂直滚动，按需求这里采用水平横向滚动html代码：<div class="content"> <div class="conten...
2019-07-31 16:50:12
9471
转载 （淘宝无限适配）手机端rem布局详解（转载非原创）
从网易与淘宝的font-size思考前端设计稿与工作流本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容较多，但对你的技术和工作一定有价值，欢迎阅读和点评：）。这是淘宝的github网址，里面有适配所需的js还有说明文档 地址：https://github.com/amfe/lib-fle...
2019-05-08 16:57:25
566
原创 swiper改动之显示三个滑块，左右两个滑块露出一部分
说到滚动轮播，很多人就会想到swiper.js这个插件，最近一个微信项目用的jQuery-weUI样式库，这个UI库的滚动轮播也是封装的swiper插件，直接引用虽然很简单，不过要是有一些特殊需求的话，还是需要自己去改造的，比如下图需求：可看到不仅只是滑动，还需要同时显示三个，中间一个全部显示，左右两个露出一部分，让用户看到，然后知道可以滑动。普通的swiper只能满足于一个个...
2019-01-11 16:29:18
15639
5
原创 页面滚动table头部悬浮
页面滚动头部悬浮，一般都会首相想到监听滚动条离顶部高度然后给需要悬浮的部分position设置成fixed，在一般布局里面是可以的，不过在table布局里面，如果要fixed悬浮thead里面的th会发现宽度样式都乱了。只能想其他办法了，可以先写一个div里面放正常需要的table，然后滚动页面后再显示出一个可以随屏幕滚动的新的thead，如图所示，圈起来的代表需要悬浮的thead：...
2018-12-07 14:31:11
2566
2
转载 使用vue实现多规格选择实例
相信在做商城的时候，很多人都会遇到规格选择这一块功能。在我刚开始接触规格的时候，有点迷茫，不知该如何下手，因为要考虑到后端那边返回的数据结构、库存、多规格等等问题，所以当时是有点懵逼。然后仔细查找相关规格的资料，才弄清楚其中的逻辑。贴一张之前写的规格界面图在这里我说说自己写规格的逻辑，1. 定义一个数组把选中的值存储起来。2. 定义一个对象存储要匹配的数据。3. 把选中的值与存...
2018-09-16 15:15:11
13423
5
原创 jquery.lazyload 懒加载失效，图片无法加载
最近的项目在修改之前公司用Freemarker写的前端ftl页面，需要将之前.ftl页面都改成H5页面，对于Freemarker这种在页面模板里面直接与后台进行交互的坑爹用法，我还需要根据Freemarker的语法将页面模板的里面进行的判断都转成js，然后与后台的交互需要转成ajax，这就需要前后端配合修改。比如：<!-- 幻灯片样式开始 --><#assign advP...
2018-08-01 16:00:15
4955
原创 关于NaN的比较
WTF？！NaN==NaN,返回的结果是false？！也许这是因为我们没有使用严格等价(===)操作？var x = Math.sqrt(-2);var y = Math.log(-1);console.log(x === y); // false也不对。因为有很多方法来表示一个非数字，所以一个非数字不会等于另一个为NaN的非数字，它还是有一定道理的。不过在ECMAScript 6中...
2018-07-06 10:02:16
2662
1
原创 js两种实用的排序算法——冒泡、快速排序
给定需要排序的数组arr=[98,10,5,30,21,20,35,78,55,20];一：冒泡排序1、原理：冒泡排序原理：每一次对比相邻两个数据的大小，小的排在前面，如果前面的数据比后面的大就交换这两个数的位置 要实现上述规则需要用到两层for循环，外层从第一个数到倒数第二个数，内层从外层的后面一个数到最后一个数2、特点：排序算法的基础。简单实用易于理解，缺点是比较次数多，效率较低。...
2018-02-26 15:26:24
852
转载 HTML5 + canvas完成视频截图
最近项目需要做一个H5视频截图功能，在网上找了一些资料，核心部分都是用canvas来完成截图，找到一篇很不错的博文，这里搬过来作为自己的积累，原文如下：“一般的视频网站对于用户上传的视频，在用户上传完成后，可以对播放的视频进行截图，然后作为视频的展示图。项目中也可以引入这样的功能给用户一种不错的体验，而不是让用户额外上传一张展示图。效果图：看起来还是很不错，下面我给大家分析下，
2018-01-11 14:04:49
6739
1
原创 Echarts3.0引入百度地图
最新项目需要引用echarts里面的一个地图例子，按照官网引入之前是报错series.custom不存在，找了半天是因为我们项目中的echarts不是最新的，只有3.6.0以上的才支持custom，后来引入了最新的之后，会报错api.coord is undefined。这个原因就找了很有一段时间了，全是按照官网引用的啊，咋会报这错呢，后来也是在网上找到的，因为没有下载bmap.js ,bma
2017-12-26 16:01:25
2041
1
转载 3分钟学会sessionStorage用法
前言： 因最近移动端开发过程中遇到一个运营提出的所谓技术难点需求，对于原生APP来说轻而易举，毕竟自己的APP用户操作指哪打哪，但是H5该怎么做?H5就实现不了么？对于一个爱研究攻克这些前端棘手问题的我来说，我没尝试过，我是拒绝对提出需求者说实现不了，做不到之类的。 是什么需求呢？--需求方要求用户在一个列表页浏览时，点击一个列表进入详情页，返回要求记录用户刚刚浏览的位置，而不
2017-12-07 14:33:13
818
原创 react native前端环境安装
最近项目要做微信商城，公司买了一个使用RN开发的电商代码，终于可以实战传说中的RN了，前端的环境配置基本上是按照react native官网来的，不过步骤比官网的（传送门）简单些。步骤如下：1、首先是在node.js官网下载最新的node，安装好之后设置npm镜像，在命令窗口依次输入npm config set registry https://registry.npm.taobao.or
2017-11-17 11:04:26
390
转载 zTree checkbox 异步加载
jsp部分： ${applicationName} <!-- -- 创建人：liyafei -- 创建时间：2014-06-25 -- 备注：新建 -- @version 1.0 -- 说明： 此页面是组织多选页面， 父页面必须有 id="orgIds",id="orgNames" 的两个标签, 分别是选
2017-11-01 17:18:20
1001
原创 html 页面内锚点定位及跳转方法总结
项目中经常会出现点击跳转锚点的方法，比如给一个a标签一个href=“#锚点”，然后要跳的锚点给个id=“锚点”，这样就实现简单的跳转，但是这样在url地址栏后面都会出现一个诸如www.csdn.net#锚点，然后你点击给一次后退都是退回上一个选择的锚点url，这里总结一些跳转锚点的方法。第一种方法，也是最简单的方法是锚点用标签，在href属性中写入DIV的id。如下：div {
2017-07-24 15:11:36
83319
8
原创 车型选择三级联动插件
由于项目需要需要一个车型选择的三级联动插件，即先选择品牌，再选择车系，最后选择车型的联动，说起三级联动可能最常见的就是省市区然后三个select的这样的联动，如图根据传回后台的参数来请求每一级的数据。最开始也是准备做成这种简单的联动的，奈何项目经理觉得这种太low了，要做得好看些，然后直接丢给我一个竞品的网站参考，说就做成这样的。先选择品牌：然后选择车系：然后选择排量：...
2017-07-04 10:18:49
6420
23
转载 js常用插件
关于插件的干货走一波：mvc分页插件：http://www.webdiyer.com/utils/spgenerator/弹出框插件：http://layer.layui.com/api.html#title淘宝旅行通用日历组件：http://fgm.cc/learn/calendar/trip-calendar/api.html酒店价格日历:
2017-06-15 13:51:23
927
转载 常见HTTP错误代码大全
一些常见的状态码为：200 - 服务器成功返回网页404 - 请求的网页不存在503 - 服务不可用详细分解：1xx（临时响应）表示临时响应并需要请求者继续执行操作的状态代码。代码 说明100 （继续） 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。 101 （切换协议） 请求者已要求服务器切换协议，服务器已确认
2017-06-01 13:58:56
624
转载 JavaScript项目中使用的工具类
在JavaScript的开发中，我们都会写一些工具类来帮我们简化一些业务操作的逻辑，一下就貼几个我在项目开发过程中常用的工具类。表达能力有限，各位看官还是看源码吧。一、日期处理工具类。/** * 日期处理工具类 * @Authors: jackyWHJ * @date 2013-10-18 * */var DateUtils = { /**
2017-05-27 14:44:10
776
原创 "设为默认"按钮将内容保存在cookie中
项目中遇到需要将一些值设为默认，然后下次继续显示设置的默认值，开始准备是把默认值保存在后台，然后下次进入的时候请求后台的数据直接显示出来，后来这个“设为默认”的功能一直没做，快上线了，就决定先把默认值存在cookie中。部分代码如下：//设为默认按钮的事件绑定 setDefault:function(){ var button=settings.thisPopo.find(".s
2017-05-26 16:40:17
858
转载 前端控件之Jquery datetimepicker的使用总结
效果图 在介绍jquery datetimepicker的使用方法前，我们先来看一下它的实现效果图，这样以便让你更快地了解它是否是你所需要的。 下面我截了四张常用的效果图（截取自http://xdsoft.net/jqplugins/datetimepicker )，另外在这里我只总结了几个常用的功能，如果你正在使用该控件，而本文没有写到的，请到上面网站上查看使用方法。
2017-05-09 20:59:55
5490
转载 HTTP协议详解
当今web程序的开发技术真是百家争鸣，ASP.NET, PHP, JSP，Perl, AJAX 等等。 无论Web技术在未来如何发展，理解Web程序之间通信的基本协议相当重要, 因为它让我们理解了Web应用程序的内部工作. 本文将对HTTP协议进行详细的实例讲解，内容较多，希望大家耐心看。也希望对大家的开发工作或者测试工作有所帮助。使用Fiddler工具非常方便地捕获HTTP Request和HT
2017-05-09 16:23:16
801
转载 JS中的递归
递归基础递归的概念在程序中函数直接或间接调用自己直接调用自己间接调用自己跳出结构,有了跳出才有结果递归的思想递归的调用,最终还是要转换为自己这个函数如果有个函数foo,如果他是递归函数,到最后问题还是转换为函数foo的形式递归的思想就是将一个未知问题转换为一个已解决的问题来实现 function foo(){ ...
2017-04-28 17:22:25
2776
原创 input框只能输入数字和小数点
对于input框只能输入数字和小数点，可能最容易想到的就是直接给input的type赋值为number，这确实是最简单的，但是也有一些问题，比如number的input右边会有自己默认的上下箭头，它还有鼠标滚轮事件，然后在实际项目中不方便控制这个滚动的值。如果input还是text类型，通过js来控制其输入又怎么做呢，话不多说上代码：$("input").bind("keyup",functi
2017-04-26 11:28:40
21891
2
原创 关于H5拖拽事件
鼠标拖拽事件在项目中时很常见的，如果用原生js去实现会很复杂，好在H5自带拖拽API。如图：之前只是实现了点击进度条移动到鼠标点击的地方，话不多说上代码，html代码如下： 0 1/4 1/2 3/4 Max css代码如下： .repair-slider { margin-top: 20px; position: rela
2017-04-08 17:05:32
2249
原创 jQuery事件触发和js手动触发事件
之前在项目中遇到了需要手动触发事件的问题，比如鼠标双击操作，需要在键盘上按Enter键也有鼠标双击产生的效果，在jQuery中我们知道trigger可以在每一个匹配的元素上触发某类事件，比如$("input").trigger("dblclick"),就可以直接激发选中input的鼠标双击事件，而我们的项目中也引用了JqGrid，在JqGrid中有双击事件ondblClickRow,项目中代码如下
2017-04-08 16:10:32
4214
原创 基于jQuery插件之初探
有段时间没更博客了，最近换了份工作，从之前的编写H5移动端页面项目到现在的PC端单页面项目，进项目组之后主要做的事情就是编写前端插件，1个多月来的工作，把自己在这个项目中编写插件的一些体会做个小结。 总体来讲，写插件并不难，难在插件在不同页面的调用可能出现的bug及调试，至少自己写的一些插件或多或少都有些问题，在后期再进行拓展及维护。最外层一般直接这样包裹起来：(function(
2017-04-08 15:28:48
803
原创 css实现垂直居中
有好多次遇到过这样的需求，垂直居中显示某个DIV，我们知道CSS中天然有水平居中的样式 text-align:center 。唯独这个垂直居中无解。当然你可以将容器设置为 display:table ，然后将子元素也就是要垂直居中显示的元素设置为 display:table-cell ，然后加上来实现，但此种实现往往会因为 display：table 而破坏整体布局，那还不如直
2017-01-22 17:53:54
359
空空如也
怎么使鼠标滚轮每次滚动自定义距离？
2016-01-13
TA创建的收藏夹 TA关注的收藏夹
TA关注的人