New work()

4月开始接盘,前人挖坑后人种树系列

目前使用了:
  • layui
  • jquery-weui
  • WeUi
  • Echarts.js
  • swiper.js
  • fastclick.js
  • video.js
  • bootstrap
  • easyui

模板引擎文档 - layui.laytpl----标准实例参考:

//假设你得到了这么一段数据
var data = {
  title: '前端圈',
  intro: '一群码js的骚年,幻想改变世界,却被世界改变。',
  list: [
          {name: 'bob', city: '杭州'},  {name: 'peter', city: '北京'}, 
          {name: 'faker', city: '杭州'}, {name: 'joking', city: '北京'}
        ]
};

var tpl = document.getElementById('tpl').innerHTML; //读取模版
//方式一:异步渲染(推荐)
laytpl(tpl).render(data, function(render){
  document.getElementById('view').innerHTML = render;
});

//方式二:同步渲染:
var render = laytpl(tpl).render(data);
document.getElementById('view').innerHTML = render;复制代码

<h3>{{ d.title }}</h3>
<p class="intro">{{ d.intro }}</p>
<ul>
{{# for(var i = 0, len = d.list.length; i < len; i++){ }}
  <li>
    <span>{{ d.list[i].name }}</span>
    <span>所在城市:{{ d.list[i].city }}</span>
  </li>
{{# } }}
</ul>复制代码

https://www.layui.com/复制代码

location.search

search 属性是一个可读可写的字符串,可设置或返回当前 URL 的查询部分
(问号 ? 之后的部分)

FastClick

处理移动端 click 事件 300 毫秒延迟, 由 FT Labs 开发,

Github 项目地址:github.com/ftlabs/fast…

为什么存在延迟?

根据 Google 开发者文档

...mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间。为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作。

兼容性

  • Mobile Safari on iOS 3 and upwards
  • Chrome on iOS 5 and upwards
  • Chrome on Android (ICS)
  • Opera Mobile 11.5 and upwards
  • Android Browser since Android 2
  • PlayBook OS 1 and upwards

不应用 FastClick 的场景

  • 桌面浏览器;
  • 如果 viewport meta 标签 中设置了 width=device-width, Android 上的 Chrome 32+ 会禁用 300ms 延时;
<meta name="viewport" content="width=device-width, initial-scale=1">
复制代码
  • viewport meta 标签如果设置了 user-scalable=no,Android 上的 Chrome(所有版本)都会禁用 300ms 延迟。
  • IE10 中,可以使用 css 属性 -ms-touch-action: none 禁止元素双击缩放(参考文章)。

使用方法

TODO: 修改使用接口

window.addEventListener('load', function() {
  FastClick.attach(document.body);
}, false);复制代码
$(function() {
  FastClick.attach(document.body);
});复制代码
var attachFastClick = require('fastclick');
attachFastClick(document.body);复制代码


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值