-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.xml
36 lines (36 loc) · 4.61 KB
/
search.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?xml version="1.0" encoding="utf-8"?>
<search>
<entry>
<title><![CDATA[踩坑日记-运营商劫持]]></title>
<url>%2F2018%2F07%2F26%2F%E8%B8%A9%E5%9D%91%E6%97%A5%E8%AE%B0-%E8%BF%90%E8%90%A5%E5%95%86%E5%8A%AB%E6%8C%81%2F</url>
<content type="text"></content>
<categories>
<category>Trample</category>
</categories>
<tags>
<tag>-踩坑日记</tag>
</tags>
</entry>
<entry>
<title><![CDATA[图片懒加载]]></title>
<url>%2F2018%2F07%2F26%2F%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD%2F</url>
<content type="text"><![CDATA[javaScript实现图片懒加载功能12345678910111213141516171819202122232425262728<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1"> <title>lazyload</title></head><body> <div class="imgList"> <img src="" data-src="images/218954.jpg" alt=""> <img src="" data-src="images/218954.jpg" alt=""> <img src="" data-src="images/218954.jpg" alt=""> <img src="" data-src="images/218954.jpg" alt=""> <img src="" data-src="images/218954.jpg" alt=""> <img src="" data-src="images/218954.jpg" alt=""> <img src="" data-src="images/218954.jpg" alt=""> <img src="" data-src="images/218954.jpg" alt=""> <img src="" data-src="images/218954.jpg" alt=""> <img src="" data-src="images/218954.jpg" alt=""> <img src="" data-src="images/218954.jpg" alt=""> <img src="" data-src="images/218954.jpg" alt=""> </div></body></html> 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354window.onload = function () { (function () { var imgList = [], delay, time = 100, offset = 0; // 函数防抖 function _delay() { // 清除倒计时 clearTimeout(delay); delay = setTimeout(function () { _loadImg(); }, time) }; // 执行图片加载 function _loadImg() { for (var i = 0; i < imgList.length; i++) { // 是否在可视区域和src是否为空 (function (index) { if (_isShow(imgList[index]) && imgList[index].getAttribute('src') === '') { setTimeout(function () { imgList[index].src = imgList[index].getAttribute('data-src'); }, 30 * i); } })(i); } }; // 判断img是否出现在可视窗口 function _isShow(el) { var coords = el.getBoundingClientRect(); return (0 <= coords.top && coords.top <= (document.documentElement.clientHeight || window.innerHeight)); }; // 获取所有需要实现懒加载图片对象引用并设置 window 监听事件 scroll function imgLoad(selector) { if (selector) { var nodes = document.querySelectorAll(selector); imgList = Array.apply(null, nodes); // 初始化图片加载 _loadImg(); window.addEventListener('scroll', _delay, false) } else { console.warn('请输入元素列表名称'); } }; imgLoad('.imgList img'); // imgLoad(); })(); } 1234567891011121314body { margin: 0; padding: 0; background: #f8f8f8 } .imgList img { display: block; width: 100%; height: 200px; background: #666; border-bottom: 1px solid #ccc; margin-bottom: 15px; }]]></content>
<categories>
<category>Web</category>
</categories>
<tags>
<tag>-HTML -JavaScript</tag>
</tags>
</entry>
<entry>
<title><![CDATA[移动端软键盘搜索按钮]]></title>
<url>%2F2018%2F06%2F22%2F%E7%A7%BB%E5%8A%A8%E7%AB%AF%E8%BD%AF%E9%94%AE%E7%9B%98%E6%90%9C%E7%B4%A2%E6%8C%89%E9%92%AE%2F</url>
<content type="text"><![CDATA[最近有个需求，在移动端页面input输入框输入的时候要显示搜索按钮一开始是这么写的,虽然加了input type 设置为 search，但是显示是换行按钮123<div class="m-c-search-l"> <span><input class="ft-28 c-333" type="search" :placeholder="placeholder" v-model='searchText'/></span></div> 如图所示 后来找了一些资料得加上form表单，action属性可以设置为空，不然还会跳转一次。然后监听form表单的submit提交触发接口搜索，用keycode事件方法监听键盘也是可以的。123<form action="" @submit.prevent="onEnvent"> <span><input class="ft-28 c-333" type="search" :placeholder="placeholder" v-model='searchText'/></span></form> 下面的图是完成的状态]]></content>
<categories>
<category>Web</category>
</categories>
<tags>
<tag>-HTML -JavaScript</tag>
</tags>
</entry>
</search>