原理:
1。定義每行的高度是40px,在touchend實踐出發時,計算出當前div的scrolltop.判斷是否已經滑動結束。如果滑動結束,四捨五入算出當前的高度距離第幾個最近,則設定div的scrolltop.如果滑動未結束。計算當前的scrolltop,與100毫秒之後的scrolltop值是否相等。
以下是源**:
lang="en">
charset="utf-8">
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
活動title>
* .bottom
.slide
.item
.slide2
.centerdiv
.main
.head
style>
head>
class="bottom">
class="head"
onclick="hidediv()">完成div>
id="mainslide">
class="main">
class="slide">
div>
class="slide2">
div>
style="clear: both;">
div>
div>
class="centerdiv">
div>
div>
div>
body>
src="../js/jquery.min.js">
script>
src="../js/base.js">
script>
var listdata = {};
function
init
() , "sqyc/citylist.api", function
(data)
touchstart();
var event = document.createevent('events');
event.initevent('touchend', true, true);
document.getelementbyid("mainslide").dispatchevent(event);})}
init();
var index = 0;
var startx = 0, starty = 0, endx = 0, endy = 0, direction = 1;
function
touchstart
() , false);
document.getelementbyid("mainslide").addeventlistener("touchmove", function
(event) , false);
document.getelementbyid("mainslide").addeventlistener("touchend", function
(event) , "sqyc/cityairport.api", function
(data)
})else
}}, "slide");
}else , "slide2");
}}, false);
}var endindex = 0;
function
isend
(height, endfun, classname) , 10);
endindex = n;
if (endfun)
settimeout(function
() , 10)
} else
}, 50);
}function
hidediv
()script>
html>
注意:1:本例的效果是基於向服務端請求資料,然後在渲染。
2:請在手機上開啟該位址,若為pc端,請調至手機模式
示例url:
下拉選擇框
示例 id dropdownlist use class txt onchange selectsort this.value onmousedown this.classname colorfocus onblur this.classname txt value 全部 全部 option val...
H5萬能選擇器 iosselect
iosselect是個什麼東西?移動端瀏覽器對於select的展示樣式是不一致的,ios下是類似原生的picker,安卓下各瀏覽器展示各異,我們需要乙個選擇器元件來統一各端下各種瀏覽器的展示。下面是它的乙個截圖 文件和demo可以訪問github iosselect能做什麼?移動端開發中,經常遇到選...
類似gitbook的wiki選擇
一直以來,都使用xwiki作為團隊內部的文件管理工具,但一直想換乙個比較輕量級的系統。團隊成員普遍對gitbook風格有好感,於是先後試用了mdwiki dokuwiki hexo mindoc wikitten。mdwiki 純粹用ajax寫的,部署最簡單,但是目錄只能兩級 dokuwiki ph...