<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[this_ITBoy的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/this_ITBoy</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; this_ITBoy]]></copyright><item><title><![CDATA[pod install报错踩坑记录]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/121835075</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/121835075</guid><author>this_ITBoy</author><pubDate>Thu, 09 Dec 2021 18:24:48 +0800</pubDate><description><![CDATA[pod install报错LibreSSL SSL_connect: SSL_ERROR_SYSCALL in connection to github.com:443]]></description><category></category></item><item><title><![CDATA[纯css设置border-width]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/106681485</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/106681485</guid><author>this_ITBoy</author><pubDate>Thu, 11 Jun 2020 10:06:25 +0800</pubDate><description><![CDATA[常见的border设置一般都是直接类似1px solid #eee，但是在移动端上会发现这个1px的border显得很粗，如果直接设置0.5px的话，在ios里面的显示到还正常，不过有些安卓机不支持浮点数的的样式设置，这个时候就需要统一处理的，话不多说直接上代码吧，纯css设置border-width为0.5px，css代码如下：


      .input-wrap {
        position: relative;
      }
      .input-wrap::after{
...]]></description><category></category></item><item><title><![CDATA[小程序多个swiper高度自适应]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/106422296</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/106422296</guid><author>this_ITBoy</author><pubDate>Fri, 29 May 2020 13:57:39 +0800</pubDate><description><![CDATA[之前做个一个多个tab的列表页，每个tab下的内容对应的就是swiper，而小程序的swiper的高度默认是150px，不能自适应内容高度，最开始我们的列表内容每个卡片的高度都是差不多的，当时做的是把每个卡片高度固定400px，然后用固定的高度*每个tab下卡片的数量来得到每个swiper的高度，具体博客链接：https://blog.youkuaiyun.com/this_ITBoy/article/details/103869457。但是，后来出了新的需求，如图：



可以看到，第一个卡片加入了物流的信息...]]></description><category></category></item><item><title><![CDATA[基于vue页面的多个标题滑动吸顶与多选分页加载]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/105559114</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/105559114</guid><author>this_ITBoy</author><pubDate>Thu, 16 Apr 2020 15:44:03 +0800</pubDate><description><![CDATA[最近做一个需求，产品要求一个发票列表可以多选发送到邮箱，而且分页加载，并且按照月份排序，滑动的时候月份的部分吸顶，先看看设计图吧。



  由于整个项目都是基于vue开发的，项目里有的页面是用vux中的scroll组件实现分页的，看文档里这个组件都已经不维护了，所以用的是vue-infinite-scroll组件，分页就不用多说了。


  这里有个多选与全选，如果点...]]></description><category></category></item><item><title><![CDATA[小程序列表页tab切换swiper并滚动到上次位置]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/103869457</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/103869457</guid><author>this_ITBoy</author><pubDate>Tue, 07 Jan 2020 10:49:14 +0800</pubDate><description><![CDATA[最近小程序做到一个很常见的需求，订单列表功能。虽说看着很常见，做起来也发现了有一些坑。效果如图：

这里就是顶部tab页切换到不同状态的订单，下次切回来不刷新页面而且需要跳到上次浏览的地方，然后滑动每个页面对应的tab也能完成相应的切换。小程序的话很容易就想到swiper组件，然后滑动的当前swiper-item和tab的index对应起来就可以了。而且页面滑动页有对应的scroll-vie...]]></description><category></category></item><item><title><![CDATA[微信小程序开源源码，仿淘宝、京东、今日头条等]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/103679016</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/103679016</guid><author>this_ITBoy</author><pubDate>Tue, 24 Dec 2019 10:40:57 +0800</pubDate><description><![CDATA[wx-gesture-lock微信小程序的手势密码

WXCustomSwitch微信小程序自定义 Switch 组件模板

WeixinAppBdNovel微信小程序demo：百度小说搜索

shitoujiandaobu小程序：石头剪刀布（附代码说明）

audiodemo微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义

star微信小程序开发之五星评分

swit...]]></description><category></category></item><item><title><![CDATA[图片懒加载原理及实现]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/102657375</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/102657375</guid><author>this_ITBoy</author><pubDate>Mon, 21 Oct 2019 09:32:06 +0800</pubDate><description><![CDATA[原理：

先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。

这样做能防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等。

实现：


&lt;!DOCTYPE html...]]></description><category></category></item><item><title><![CDATA[移动端H5页面关于软键盘的一些踩坑记录]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/100089299</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/100089299</guid><author>this_ITBoy</author><pubDate>Tue, 27 Aug 2019 11:20:26 +0800</pubDate><description><![CDATA[最近一个项目需要做一个留言的功能，需求很简单，点击留言按钮底部弹出留言框，然后发送留言给后台就行了，还有一个就是页面要实现复制功能。讨论需求的时候我预想到了手机上软键盘的弹出可能会有一些bug，不过需求比较急，就想着先做完再来改呗。很快做完之后，在电脑上测了没毛病，提测之后，bug刷刷的就来了：

1、手机ios或者Android微信，点击留言弹出输入框，点击完成或者收起按钮，或者安卓手机点击自带...]]></description><category></category></item><item><title><![CDATA[原型链万能公式，关于__proto__和prototype的那些事]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/99640794</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/99640794</guid><author>this_ITBoy</author><pubDate>Thu, 15 Aug 2019 17:25:10 +0800</pubDate><description><![CDATA[昨天在一个技术群里，有个小伙伴提出了这么个问题：


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();...]]></description><category></category></item><item><title><![CDATA[纯css实现横向滚动]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/97932021</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/97932021</guid><author>this_ITBoy</author><pubDate>Wed, 31 Jul 2019 16:50:12 +0800</pubDate><description><![CDATA[前不久碰到一个需求，在宽度不固定下实现横线滚动，这里我用css来写，记录下来，供以后借鉴。
子元素的宽度大于父元素是，会出现滚动 overflow-x: scroll; 为水平滚动，overflow-y: scroll; 为垂直滚动，按需求这里采用水平横向滚动

html代码：


&lt;div class="content"&gt;
        &lt;div class="conten...]]></description><category></category></item><item><title><![CDATA[（淘宝无限适配）手机端rem布局详解（转载非原创）]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/89960902</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/89960902</guid><author>this_ITBoy</author><pubDate>Wed, 08 May 2019 16:57:25 +0800</pubDate><description><![CDATA[从网易与淘宝的font-size思考前端设计稿与工作流

本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习，讨论html5设计稿尺寸以及前端与设计之间协作流程的问题，内容较多，但对你的技术和工作一定有价值，欢迎阅读和点评：）。

这是淘宝的github网址，里面有适配所需的js还有说明文档 地址：https://github.com/amfe/lib-fle...]]></description><category></category></item><item><title><![CDATA[swiper改动之显示三个滑块，左右两个滑块露出一部分]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/86304980</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/86304980</guid><author>this_ITBoy</author><pubDate>Fri, 11 Jan 2019 16:29:18 +0800</pubDate><description><![CDATA[说到滚动轮播，很多人就会想到swiper.js这个插件，最近一个微信项目用的jQuery-weUI样式库，这个UI库的滚动轮播也是封装的swiper插件，直接引用虽然很简单，不过要是有一些特殊需求的话，还是需要自己去改造的，比如下图需求：



可看到不仅只是滑动，还需要同时显示三个，中间一个全部显示，左右两个露出一部分，让用户看到，然后知道可以滑动。普通的swiper只能满足于一个个...]]></description><category></category></item><item><title><![CDATA[小程序海报分享之踩坑日记]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/85272848</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/85272848</guid><author>this_ITBoy</author><pubDate>Thu, 27 Dec 2018 17:04:17 +0800</pubDate><description><![CDATA[        最近项目需要添加小程序海报分享的功能，也就是可以生成商品图片和跳转商品详情页的小程序码（也叫菊花码），然后用户点击保存图片后，添加到手机相册，用户可以直接把已保存的图片发出来，其他人可以通过长按小程序码直接跳转到商品详情页。看起来比较普通的一个需求，上手做起来之后才会发现有各种各样的坑，下面就来看看遇到了那些坑吧。

      一开始肯定是直接文档走起，小程序获取小程序码，刚开始...]]></description><category></category></item><item><title><![CDATA[页面滚动table头部悬浮]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/84873791</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/84873791</guid><author>this_ITBoy</author><pubDate>Fri, 07 Dec 2018 14:31:11 +0800</pubDate><description><![CDATA[      页面滚动头部悬浮，一般都会首相想到监听滚动条离顶部高度然后给需要悬浮的部分position设置成fixed，在一般布局里面是可以的，不过在table布局里面，如果要fixed悬浮thead里面的th会发现宽度样式都乱了。只能想其他办法了，可以先写一个div里面放正常需要的table，然后滚动页面后再显示出一个可以随屏幕滚动的新的thead，如图所示，圈起来的代表需要悬浮的thead：
...]]></description><category></category></item><item><title><![CDATA[mpvue仿苹果滑动删除]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/84315258</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/84315258</guid><author>this_ITBoy</author><pubDate>Wed, 21 Nov 2018 11:42:58 +0800</pubDate><description><![CDATA[       最近项目在使用mpvue开发微信商城小程序和H5，不得不说美团点评的这款基于Vue的框架同时开发小程序和H5确实是还算好用的，基本上一套代码可以同时兼容微信小程序和H5页面，当然在一些特殊的地方还是需要做区分兼容的。需要从头开始看的可以看看这篇博客https://blog.youkuaiyun.com/Aimee1608/article/details/81084553。

       在做到...]]></description><category></category></item><item><title><![CDATA[mpvue小程序商品规格选择]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/82724804</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/82724804</guid><author>this_ITBoy</author><pubDate>Sun, 16 Sep 2018 15:54:47 +0800</pubDate><description><![CDATA[        最近由于项目的需求，需要开发出一个基于mpvue框架的小程序商城。之前写过原生的小程序，所以还需要学习mpvue，由于需求很急，所以只有边学边开发了。商城自然离不开商品详情页，这个算是商城里面比较复杂的页面了，做到商品规格选择的时候看到后台返回的一系列数据简直头大了。



       商品规格都在goodsSpecObj字段里面，然后里面各种键值对的字段；其中allOpenSp...]]></description><category></category></item><item><title><![CDATA[使用vue实现多规格选择实例]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/82724701</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/82724701</guid><author>this_ITBoy</author><pubDate>Sun, 16 Sep 2018 15:15:11 +0800</pubDate><description><![CDATA[相信在做商城的时候，很多人都会遇到规格选择这一块功能。在我刚开始接触规格的时候，有点迷茫，不知该如何下手，因为要考虑到后端那边返回的数据结构、库存、多规格等等问题，所以当时是有点懵逼。然后仔细查找相关规格的资料，才弄清楚其中的逻辑。

贴一张之前写的规格界面图



在这里我说说自己写规格的逻辑，

1. 定义一个数组把选中的值存储起来。
2. 定义一个对象存储要匹配的数据。
3. 把选中的值与存...]]></description><category></category></item><item><title><![CDATA[jquery.lazyload 懒加载失效，图片无法加载]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/81331915</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/81331915</guid><author>this_ITBoy</author><pubDate>Wed, 01 Aug 2018 16:00:15 +0800</pubDate><description><![CDATA[最近的项目在修改之前公司用Freemarker写的前端ftl页面，需要将之前.ftl页面都改成H5页面，对于Freemarker这种在页面模板里面直接与后台进行交互的坑爹用法，我还需要根据Freemarker的语法将页面模板的里面进行的判断都转成js，然后与后台的交互需要转成ajax，这就需要前后端配合修改。比如：


&amp;lt;!-- 幻灯片样式开始 --&amp;gt;
&amp;lt;#assign advP...]]></description><category></category></item><item><title><![CDATA[关于NaN的比较]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/80936515</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/80936515</guid><author>this_ITBoy</author><pubDate>Fri, 06 Jul 2018 10:02:16 +0800</pubDate><description><![CDATA[WTF？！NaN==NaN,返回的结果是false？！也许这是因为我们没有使用严格等价(===)操作？var x = Math.sqrt(-2);
var y = Math.log(-1);
console.log(x === y);      // false也不对。因为有很多方法来表示一个非数字，所以一个非数字不会等于另一个为NaN的非数字，它还是有一定道理的。不过在ECMAScript 6中...]]></description><category></category></item><item><title><![CDATA[百度云音视频直播全屏时与layer弹框冲突问题的解决]]></title><link>https://blog.youkuaiyun.com/this_ITBoy/article/details/79666955</link><guid>https://blog.youkuaiyun.com/this_ITBoy/article/details/79666955</guid><author>this_ITBoy</author><pubDate>Fri, 23 Mar 2018 15:04:45 +0800</pubDate><description><![CDATA[        前段时间项目中做视频直播用到了百度云的音视频直播LSS，由于需求需要在pc端要加一些自定义的按钮，因此需要把百度云播放器放在页面弹框里面，而layer算是比较好用的一款弹框插件，做出的效果图如图：弹框下面还有截图的功能，截图是用H5的canvas能直接截取video标签里内容drawImage()方法，点击截图按钮效果如图：保存按钮直接上传到服务器，可以看到图一背景还引入了百度地图...]]></description><category></category></item></channel></rss>