关注
分享
this_ITBoy
昏暗的路灯下独步的我，
毁灭阴影在脚底闪烁，
咽下支配死灵的苦果，
魔王降临的那一刻，
有没有，
那么一个人，
为你独唱，
魂之挽歌。
展开
-
pod install报错踩坑记录
pod install报错LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443原创 2021-12-09 18:24:48 · 3793 阅读 · 0 评论 -
纯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 · 718 阅读 · 0 评论 -
小程序多个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 阅读 · 0 评论 -
基于vue页面的多个标题滑动吸顶与多选分页加载
最近做一个需求，产品要求一个发票列表可以多选发送到邮箱，而且分页加载，并且按照月份排序，滑动的时候月份的部分吸顶，先看看设计图吧。 由于整个项目都是基于vue开发的，项目里有的页面是用vux中的scroll组件实现分页的，看文档里这个组件都已经不维护了，所以用的是vue-infinite-scroll组件，分页就不用多说了。 这里有个多选与全选，如果点...原创 2020-04-16 15:44:03 · 1583 阅读 · 0 评论 -
小程序列表页tab切换swiper并滚动到上次位置
最近小程序做到一个很常见的需求，订单列表功能。虽说看着很常见，做起来也发现了有一些坑。效果如图：这里就是顶部tab页切换到不同状态的订单，下次切回来不刷新页面而且需要跳到上次浏览的地方，然后滑动每个页面对应的tab也能完成相应的切换。小程序的话很容易就想到swiper组件，然后滑动的当前swiper-item和tab的index对应起来就可以了。而且页面滑动页有对应的scroll-vie...原创 2020-01-07 10:49:14 · 3246 阅读 · 0 评论 -
微信小程序开源源码，仿淘宝、京东、今日头条等
wx-gesture-lock微信小程序的手势密码WXCustomSwitch微信小程序自定义 Switch 组件模板WeixinAppBdNovel微信小程序demo：百度小说搜索shitoujiandaobu小程序：石头剪刀布（附代码说明）audiodemo微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义star微信小程序开发之五星评分swit...原创 2019-12-24 10:40:57 · 4299 阅读 · 2 评论 -
图片懒加载原理及实现
原理：先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。这样做能防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等。实现：<!DOCTYPE html...原创 2019-10-21 09:32:06 · 170 阅读 · 0 评论 -
mpvue小程序商品规格选择
最近由于项目的需求，需要开发出一个基于mpvue框架的小程序商城。之前写过原生的小程序，所以还需要学习mpvue，由于需求很急，所以只有边学边开发了。商城自然离不开商品详情页，这个算是商城里面比较复杂的页面了，做到商品规格选择的时候看到后台返回的一系列数据简直头大了。 商品规格都在goodsSpecObj字段里面，然后里面各种键值对的字段；其中allOpenSp...原创 2018-09-16 15:54:47 · 2651 阅读 · 0 评论 -
mpvue仿苹果滑动删除
最近项目在使用mpvue开发微信商城小程序和H5，不得不说美团点评的这款基于Vue的框架同时开发小程序和H5确实是还算好用的，基本上一套代码可以同时兼容微信小程序和H5页面，当然在一些特殊的地方还是需要做区分兼容的。需要从头开始看的可以看看这篇博客https://blog.csdn.net/Aimee1608/article/details/81084553。 在做到...原创 2018-11-21 11:42:58 · 838 阅读 · 0 评论 -
页面滚动table头部悬浮
页面滚动头部悬浮，一般都会首相想到监听滚动条离顶部高度然后给需要悬浮的部分position设置成fixed，在一般布局里面是可以的，不过在table布局里面，如果要fixed悬浮thead里面的th会发现宽度样式都乱了。只能想其他办法了，可以先写一个div里面放正常需要的table，然后滚动页面后再显示出一个可以随屏幕滚动的新的thead，如图所示，圈起来的代表需要悬浮的thead：...原创 2018-12-07 14:31:11 · 2567 阅读 · 2 评论 -
小程序海报分享之踩坑日记
最近项目需要添加小程序海报分享的功能，也就是可以生成商品图片和跳转商品详情页的小程序码（也叫菊花码），然后用户点击保存图片后，添加到手机相册，用户可以直接把已保存的图片发出来，其他人可以通过长按小程序码直接跳转到商品详情页。看起来比较普通的一个需求，上手做起来之后才会发现有各种各样的坑，下面就来看看遇到了那些坑吧。 一开始肯定是直接文档走起，小程序获取小程序码，刚开始...原创 2018-12-27 17:04:17 · 1728 阅读 · 0 评论 -
swiper改动之显示三个滑块，左右两个滑块露出一部分
说到滚动轮播，很多人就会想到swiper.js这个插件，最近一个微信项目用的jQuery-weUI样式库，这个UI库的滚动轮播也是封装的swiper插件，直接引用虽然很简单，不过要是有一些特殊需求的话，还是需要自己去改造的，比如下图需求：可看到不仅只是滑动，还需要同时显示三个，中间一个全部显示，左右两个露出一部分，让用户看到，然后知道可以滑动。普通的swiper只能满足于一个个...原创 2019-01-11 16:29:18 · 15653 阅读 · 5 评论 -
纯css实现横向滚动
前不久碰到一个需求，在宽度不固定下实现横线滚动，这里我用css来写，记录下来，供以后借鉴。子元素的宽度大于父元素是，会出现滚动 overflow-x: scroll; 为水平滚动，overflow-y: scroll; 为垂直滚动，按需求这里采用水平横向滚动html代码：<div class="content"> <div class="conten...原创 2019-07-31 16:50:12 · 9472 阅读 · 0 评论 -
原型链万能公式，关于__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 · 460 阅读 · 0 评论 -
移动端H5页面关于软键盘的一些踩坑记录
最近一个项目需要做一个留言的功能，需求很简单，点击留言按钮底部弹出留言框，然后发送留言给后台就行了，还有一个就是页面要实现复制功能。讨论需求的时候我预想到了手机上软键盘的弹出可能会有一些bug，不过需求比较急，就想着先做完再来改呗。很快做完之后，在电脑上测了没毛病，提测之后，bug刷刷的就来了：1、手机ios或者Android微信，点击留言弹出输入框，点击完成或者收起按钮，或者安卓手机点击自带...原创 2019-08-27 11:20:26 · 4362 阅读 · 1 评论 -
jquery.lazyload 懒加载失效，图片无法加载
最近的项目在修改之前公司用Freemarker写的前端ftl页面，需要将之前.ftl页面都改成H5页面，对于Freemarker这种在页面模板里面直接与后台进行交互的坑爹用法，我还需要根据Freemarker的语法将页面模板的里面进行的判断都转成js，然后与后台的交互需要转成ajax，这就需要前后端配合修改。比如：<!-- 幻灯片样式开始 --><#assign advP...原创 2018-08-01 16:00:15 · 4962 阅读 · 0 评论 -
关于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 · 2665 阅读 · 1 评论 -
百度云音视频直播全屏时与layer弹框冲突问题的解决
前段时间项目中做视频直播用到了百度云的音视频直播LSS，由于需求需要在pc端要加一些自定义的按钮，因此需要把百度云播放器放在页面弹框里面，而layer算是比较好用的一款弹框插件，做出的效果图如图：弹框下面还有截图的功能，截图是用H5的canvas能直接截取video标签里内容drawImage()方法，点击截图按钮效果如图：保存按钮直接上传到服务器，可以看到图一背景还引入了百度地图...原创 2018-03-23 15:04:45 · 1003 阅读 · 0 评论 -
表单提交（手机验证码60s倒计时）
发送手机验证码60s倒计时，然后提交表单的例子在现在是很常见的了，刚好项目里面用到了一个，就做个积累吧，基于sui框架的表单提交。html代码如下： 绑定手机号 绑定手机号原创 2016-09-12 11:59:44 · 4614 阅读 · 1 评论 -
SUI的无限下拉和分页效果的实现
本项目是基于template.js模板和SUI.js框架实现的，无限下拉在SUI框架里面也会有模拟，不过仅仅只是模拟，实际运用的话每次下拉的数据都是同一页的，要实现分页的效果就需要对其进行改造了。话不多说，直接上代码：html代码：- 兔兔团原创 2016-07-21 12:07:21 · 9305 阅读 · 0 评论 -
H5页面上传图片控件
做H5项目的时候应该经常会遇到上传图片的问题的，在这里介绍一种目前项目里面用到的一个H5页面上传图片的控件，代码如下：html代码：::去家玩:: 秀萌照 拍照 相册原创 2016-08-05 17:20:38 · 12637 阅读 · 0 评论 -
JS之map用法初探
一个项目的时候出现了一个获取品牌列表，并按照首字符的拼音或者英文的首字母A-Z排序的需求，如图所示： 由于html页面里面还用到了art-template的模板循环，最开始写出来的时候列表是循环了出来，但是并没有按照A-Z的分组，而是很多A,A,A，很多B,B,B，很多C,C,C，等等，问题困扰了很久，后来经人帮助用map的键值对方法得到了解决。html代码如下：原创 2016-11-10 16:32:43 · 6886 阅读 · 0 评论 -
css实现垂直居中
有好多次遇到过这样的需求，垂直居中显示某个DIV，我们知道CSS中天然有水平居中的样式 text-align:center 。唯独这个垂直居中无解。当然你可以将容器设置为 display:table ，然后将子元素也就是要垂直居中显示的元素设置为 display:table-cell ，然后加上来实现，但此种实现往往会因为 display：table 而破坏整体布局，那还不如直原创 2017-01-22 17:53:54 · 359 阅读 · 0 评论 -
基于jQuery插件之初探
有段时间没更博客了，最近换了份工作，从之前的编写H5移动端页面项目到现在的PC端单页面项目，进项目组之后主要做的事情就是编写前端插件，1个多月来的工作，把自己在这个项目中编写插件的一些体会做个小结。 总体来讲，写插件并不难，难在插件在不同页面的调用可能出现的bug及调试，至少自己写的一些插件或多或少都有些问题，在后期再进行拓展及维护。最外层一般直接这样包裹起来：(function(原创 2017-04-08 15:28:48 · 803 阅读 · 0 评论 -
jQuery事件触发和js手动触发事件
之前在项目中遇到了需要手动触发事件的问题，比如鼠标双击操作，需要在键盘上按Enter键也有鼠标双击产生的效果，在jQuery中我们知道trigger可以在每一个匹配的元素上触发某类事件，比如$("input").trigger("dblclick"),就可以直接激发选中input的鼠标双击事件，而我们的项目中也引用了JqGrid，在JqGrid中有双击事件ondblClickRow,项目中代码如下原创 2017-04-08 16:10:32 · 4217 阅读 · 0 评论 -
"设为默认"按钮将内容保存在cookie中
项目中遇到需要将一些值设为默认，然后下次继续显示设置的默认值，开始准备是把默认值保存在后台，然后下次进入的时候请求后台的数据直接显示出来，后来这个“设为默认”的功能一直没做，快上线了，就决定先把默认值存在cookie中。部分代码如下：//设为默认按钮的事件绑定 setDefault:function(){ var button=settings.thisPopo.find(".s原创 2017-05-26 16:40:17 · 858 阅读 · 0 评论 -
input框只能输入数字和小数点
对于input框只能输入数字和小数点，可能最容易想到的就是直接给input的type赋值为number，这确实是最简单的，但是也有一些问题，比如number的input右边会有自己默认的上下箭头，它还有鼠标滚轮事件，然后在实际项目中不方便控制这个滚动的值。如果input还是text类型，通过js来控制其输入又怎么做呢，话不多说上代码：$("input").bind("keyup",functi原创 2017-04-26 11:28:40 · 21893 阅读 · 2 评论 -
车型选择三级联动插件
由于项目需要需要一个车型选择的三级联动插件，即先选择品牌，再选择车系，最后选择车型的联动，说起三级联动可能最常见的就是省市区然后三个select的这样的联动，如图根据传回后台的参数来请求每一级的数据。最开始也是准备做成这种简单的联动的，奈何项目经理觉得这种太low了，要做得好看些，然后直接丢给我一个竞品的网站参考，说就做成这样的。先选择品牌：然后选择车系：然后选择排量：...原创 2017-07-04 10:18:49 · 6422 阅读 · 23 评论 -
html 页面内锚点定位及跳转方法总结
项目中经常会出现点击跳转锚点的方法，比如给一个a标签一个href=“#锚点”，然后要跳的锚点给个id=“锚点”，这样就实现简单的跳转，但是这样在url地址栏后面都会出现一个诸如www.csdn.net#锚点，然后你点击给一次后退都是退回上一个选择的锚点url，这里总结一些跳转锚点的方法。第一种方法，也是最简单的方法是锚点用标签，在href属性中写入DIV的id。如下：div {原创 2017-07-24 15:11:36 · 83326 阅读 · 8 评论 -
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 阅读 · 0 评论 -
Echarts3.0引入百度地图
最新项目需要引用echarts里面的一个地图例子，按照官网引入之前是报错series.custom不存在，找了半天是因为我们项目中的echarts不是最新的，只有3.6.0以上的才支持custom，后来引入了最新的之后，会报错api.coord is undefined。这个原因就找了很有一段时间了，全是按照官网引用的啊，咋会报这错呢，后来也是在网上找到的，因为没有下载bmap.js ,bma原创 2017-12-26 16:01:25 · 2042 阅读 · 1 评论 -
js两种实用的排序算法——冒泡、快速排序
给定需要排序的数组arr=[98,10,5,30,21,20,35,78,55,20];一：冒泡排序1、原理：冒泡排序原理：每一次对比相邻两个数据的大小，小的排在前面，如果前面的数据比后面的大就交换这两个数的位置 要实现上述规则需要用到两层for循环，外层从第一个数到倒数第二个数，内层从外层的后面一个数到最后一个数2、特点：排序算法的基础。简单实用易于理解，缺点是比较次数多，效率较低。...原创 2018-02-26 15:26:24 · 854 阅读 · 0 评论 -
点击图片浏览大图（sui框架）
项目中经常遇到点击图片或者点击相册浏览大图的情景，SUI框架自带swiper滚动的效果，详情见http://m.sui.taobao.org/中的拓展组件--图片浏览器的效果，在项目中需要做到点击图片出现图片浏览器而不是点击固定的按钮，这就需要在js里做一些改变了。部分html代码如下：原创 2016-08-18 18:01:30 · 4712 阅读 · 1 评论