<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[致力于成为web大大滴前端]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/lanbinghan2016</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; lanbinghan2016]]></copyright><item><title><![CDATA[关于textarea的相关实践]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/53350985</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/53350985</guid><author>lanbinghan2016</author><pubDate>Sat, 26 Nov 2016 14:37:44 +0800</pubDate><description><![CDATA[日前在web移动端书写一个高宽自适应的文本输入框，并且具有跟随手指移动而移动。
问题：宽度自适应实现不了。
上代码：


相关css为:
display: block;
max-width:12rem;
max-height: 12.5rem;
text-align: left;
background-color: inherit;
font-size: 0.85rem;]]></description><category></category></item><item><title><![CDATA[React当中css-loader使用]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/53129127</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/53129127</guid><author>lanbinghan2016</author><pubDate>Fri, 11 Nov 2016 15:19:45 +0800</pubDate><description><![CDATA[为了防止css重命名，在react当中可以使用css-loader来加前缀，有效防止该重命名，具体操作如下：
1、在packjson中devDependencies：加上配置"css-loader": "^0.23.1",，
2、然后在webpack.config.js的loaders的配置中，加上这句：
{test: /\.css$/, loader: 'style!css?modules]]></description><category></category></item><item><title><![CDATA[React小应用之脸部测试]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52634466</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52634466</guid><author>lanbinghan2016</author><pubDate>Fri, 23 Sep 2016 09:38:42 +0800</pubDate><description><![CDATA[用React重构了之前做的一个微信页面，页面效果大致如下： 
 
 
1、main入口的路由： 
 
首页自己写的图片上传，按钮变色效果用state来管理 
 
第二页跑马灯效果： 
 
尾页就是展示结果了，静态代码不展示了。]]></description><category></category></item><item><title><![CDATA[基于zepto写的几个常用小东西（toast、加载器、上拉加载、下拉刷新）]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52622524</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52622524</guid><author>lanbinghan2016</author><pubDate>Thu, 22 Sep 2016 14:17:25 +0800</pubDate><description><![CDATA[基于zepto的自定义toast、load加载效果
//显示一个消息，会在2秒钟后自动消失
//toast参数可选，三种是文字、时间、以及class的类
$.toast = function(msg, duration, extraclass) {
var $toast = $('' + msg + '').appendTo(document.body);
var aa=$toast.o]]></description><category></category></item><item><title><![CDATA[记录书写微信页面踩的几个坑，下不再犯]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52609491</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52609491</guid><author>lanbinghan2016</author><pubDate>Wed, 21 Sep 2016 16:30:43 +0800</pubDate><description><![CDATA[1、overflow引起的坑： 
    布局时设置body的overflow:auto;最外层的div为overflow:auto;内层的div为overflow:auto;此时会产生IOS快速滑屏正常，安卓快速滑屏会白屏，内容渐显；这个是由内外产生的滚动条导致的，切不可如此写css; 
2、input的focus问题： 
    当设置input为readonly时，focus不起作用；]]></description><category></category></item><item><title><![CDATA[React+React-router+webpack 一个微信答题SPA小应用]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52461058</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52461058</guid><author>lanbinghan2016</author><pubDate>Wed, 07 Sep 2016 16:48:38 +0800</pubDate><description><![CDATA[应用介绍： 
总共三个页面，起始提示页，答题页，以及分数页； 
 
说明： 
用路由链接3个页面，提示页到答题页直接使用Link跳转，答题页跳转到分数页需要携带分数及答对的题目数，因此使用： 
hashHistory.push({ pathname: ‘/Score’,query:{score:score,number:number}}); 
将参数放到URL后面，到了分数页再获取渲染： 
 let]]></description><category></category></item><item><title><![CDATA[React+React-router+webpack重构一个微信小应用（预测宝宝2）（篇幅过长，分2次）]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52452374</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52452374</guid><author>lanbinghan2016</author><pubDate>Tue, 06 Sep 2016 18:13:07 +0800</pubDate><description><![CDATA[根据效果图，项目做了以下组件层级：
把页面分成3个，作为路由切换，app/component中是被三个页面引入的小组件；
上代码详细说明：
1、index.html:
<!DOCTYPE
 html>html

lang="en">head>

meta

charset="UTF-8">

meta

name="viewport"

content="widt]]></description><category></category></item><item><title><![CDATA[React+React-router+webpack重构一个微信小应用（预测宝宝1）（篇幅过长，分2次）]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52452298</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52452298</guid><author>lanbinghan2016</author><pubDate>Tue, 06 Sep 2016 18:02:50 +0800</pubDate><description><![CDATA[标注：React初步接触，暂时写出一个简单的spa小应用。 
开发环境安装： 
1、先安装node.js，然后全局安装 Webpack：npm install -g webpack； 
2、然后在目录文件创建package.json; 
3、使用命令行npm init，根据指示写，里面相关配置： 
{ 
  “name”: “baby”, 
  “version”: “1.0.0”, 
  “des]]></description><category></category></item><item><title><![CDATA[2个微信小应用（zepto做，日后用React重构这个SPA）]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52416102</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52416102</guid><author>lanbinghan2016</author><pubDate>Fri, 02 Sep 2016 18:18:56 +0800</pubDate><description><![CDATA[微信小应用，开发时长2天上线发出去，快速应用，因此用了zepto来方便JS的编写。 
项目一：车标测试（点击答案时JS延迟500ms+css过渡背景的效果）; 
 
 
 
项目二：宝宝测试(原生JS的图片上传功能) 
 
 
项目对自身带来的益处： 
    代码熟练; 
    input[type=”file”]的详细研究; 
    快速开发时心态的调整（要求和设计稿一致，催得紧带来的心理压]]></description><category></category></item><item><title><![CDATA[记录css自定义滚动条遇到的兼容性问题]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52412327</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52412327</guid><author>lanbinghan2016</author><pubDate>Fri, 02 Sep 2016 11:19:41 +0800</pubDate><description><![CDATA[CSS3自定义滚动条样式 -webkit-scrollbar

相关参数：




::-webkit-scrollbar 滚动条整体部分
::-webkit-scrollbar-thumb  滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
::-webkit-scrollbar-track  滚动条的轨道（里面装有Thumb）
::-w]]></description><category></category></item><item><title><![CDATA[应用在移动端网页的图片上传功能（纯手写）]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52412269</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52412269</guid><author>lanbinghan2016</author><pubDate>Fri, 02 Sep 2016 11:15:37 +0800</pubDate><description><![CDATA[文件上传触发 
 
相应的JS(为了方便 用JQ写法)： 
//上传文件函数 
    function onChange(){ 
    //获取上传的图片的相应数据 
    var formData=(“#upload”)[0].files[0];      //本地相对路径，用来判断格式       var value=(“#upload”)[0].files[0];  
    //本地相]]></description><category></category></item><item><title><![CDATA[Grunt打包压缩JS CSS]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52411873</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52411873</guid><author>lanbinghan2016</author><pubDate>Fri, 02 Sep 2016 10:46:11 +0800</pubDate><description><![CDATA[前端优化其中之一就是在代码写好之后合并压缩文件再交付后台，对于没有应用打包工具的项目，我使用了Grunt来打包压缩相应的JS css文件。小白的使用方法：
1、安装Grunt
使用NPM来安装Grunt:（使用命令行）npm install -g grunt-cli

2、创建2个配置文件 package.json(npm install 下载相关的包) Gruntfile(启动打包相关事]]></description><category></category></item><item><title><![CDATA[像素级实现设计稿笔记]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52217396</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/52217396</guid><author>lanbinghan2016</author><pubDate>Tue, 16 Aug 2016 10:09:15 +0800</pubDate><description><![CDATA[1、精确第一步，精准的使用
 Photoshop 切图
拿到设计稿一般是
 PSD 格式的，我们首先会观察一下设计稿，思考一下对应的
 HTML 结构和 CSS 设计模式，然后开始根据需求进行切图。Photoshop
 内置的自动切图脚本。位于“文件”－》“脚本”－》“将图层导出文件”。意思就是将你的图层分层分别导出为文件，而且还支持剪裁图片和格式选择等等。切图流程：从
 PSD 中找]]></description><category></category></item><item><title><![CDATA[编写前自动化部署的相关准备]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/51994581</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/51994581</guid><author>lanbinghan2016</author><pubDate>Fri, 22 Jul 2016 14:40:18 +0800</pubDate><description><![CDATA[在开发前，决定使用Grunt来做自动化部署工作：
首先，CSS等采用sass编译，首先安装Node.js（新版的自动包含了npm）、Ruby;接着安装sass，再接着构建Grount：
## 构建工具Grunt
 (如果没有安装nodejs/npm先安装nodejs/npm|ruby也得装，编译sass需要)
npm install -g grunt-cli
npm install gr]]></description><category></category></item><item><title><![CDATA[2个PC端商城测试版]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/51317045</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/51317045</guid><author>lanbinghan2016</author><pubDate>Wed, 04 May 2016 18:12:47 +0800</pubDate><description><![CDATA[这2个PC端商城是与代理商后台相关联的！2个商城风格布局都类似！]]></description><category></category></item><item><title><![CDATA[WEB收银系统（只截取我所负责的模块）]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/51316942</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/51316942</guid><author>lanbinghan2016</author><pubDate>Wed, 04 May 2016 17:58:59 +0800</pubDate><description><![CDATA[大致的截图：]]></description><category></category></item><item><title><![CDATA[PC端代理商后台]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/51316858</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/51316858</guid><author>lanbinghan2016</author><pubDate>Wed, 04 May 2016 17:49:54 +0800</pubDate><description><![CDATA[项目截图：]]></description><category></category></item><item><title><![CDATA[全选按钮]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/51275867</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/51275867</guid><author>lanbinghan2016</author><pubDate>Thu, 28 Apr 2016 16:57:54 +0800</pubDate><description><![CDATA[点击全选，其他都选中：    //全选按钮
    $(".checkSettingAll").on("click", function () {
    //找到相应的checkbox
        var inputs = $(this).parents(".orderForm").find("input[name='settingCheck']");
        //遍历让他选中]]></description><category></category></item><item><title><![CDATA[商品列表页面的某些方法处理]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/51275029</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/51275029</guid><author>lanbinghan2016</author><pubDate>Thu, 28 Apr 2016 15:56:59 +0800</pubDate><description><![CDATA[说明： 
商品列表在页面进入时只加载一次商品数据：function LoadGoods() {
    $.ajax({
        url: '/AgentShopAPP/GoodsShow/Query?date='+new Date().getMilliseconds(),
        type: 'post',
        dataType: 'json',
        asy]]></description><category></category></item><item><title><![CDATA[APP的另一个H5商城]]></title><link>https://blog.youkuaiyun.com/lanbinghan2016/article/details/51274099</link><guid>https://blog.youkuaiyun.com/lanbinghan2016/article/details/51274099</guid><author>lanbinghan2016</author><pubDate>Thu, 28 Apr 2016 14:34:52 +0800</pubDate><description><![CDATA[APP的另一个H5商城：]]></description><category></category></item></channel></rss>