為什么80%的碼農都做不了架構師？>>> ??

IScroll5真的是飛一般的順暢。一下給出例子希望能幫到您，在此也做個備忘，我們項目運行在微信公眾號上。直接上代碼

/*******滾動 部分樣式 start*******/ <style> * {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }html {-ms-touch-action: none; }body,ul,li {padding: 0;margin: 0;border: 0; }body {font-size: 12px;font-family: ubuntu, helvetica, arial;overflow: hidden; }.main-header {position: absolute;z-index: 10;top: 0;left: 0;width: 100%;height: 44px;line-height: 44px;padding: 0;text-align: center; }#footer {position: absolute;z-index: 2;bottom: 0;left: 0;width: 100%;height: 48px;background: #444;padding: 0;border-top: 1px solid #444; }#wrapper_all_tab {position: absolute;z-index: 1;top: 44px;bottom: 0px;left: 0;width: 100%;/**background: #ccc;**/overflow: hidden; }#scroller {position: absolute;z-index: 1;-webkit-tap-highlight-color: rgba(0,0,0,0);width: 100%;-webkit-transform: translateZ(0);-moz-transform: translateZ(0);-ms-transform: translateZ(0);-o-transform: translateZ(0);transform: translateZ(0);-webkit-touch-callout: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-text-size-adjust: none;-moz-text-size-adjust: none;-ms-text-size-adjust: none;-o-text-size-adjust: none;text-size-adjust: none; }#scroller ul {list-style: none;padding: 0;margin: 0;width: 100%;text-align: left; }#scroller li {padding: 0;margin-top: -11px;height: 106px;line-height: 106px;font-size: 14px;border:0px; } </style> /*******滾動 部分樣式 end*******/<!--tab 全部超限部分 --><div id="tab_all" class="weui-tab__bd-item weui-tab__bd-item--active"><div id="wrapper_all_tab"><div id="scroller" ><ul class="tab_all-weui-cells-ul"></ul><li class="firstLodingLi" style="line-height: 1.6em;height: 1.6em;margin: 1.5em auto;list-style-type:none;"><div class="weui-loadmore" style="margin-top:10px; "><i class="weui-loading"></i><span class="weui-loadmore__tips">正在加載...</span></div></li><div class="weui-loadmore weui-loadmore_line hide enptyDiv" style="margin-top:30px; "><span class="weui-loadmore__tips">暫無數據</span></div><div class="weui-loadmore weui-loadmore_line hide loadOverDiv" style="margin-top:30px; "><span class="weui-loadmore__tips">數據加載完畢</span></div><div class="weui-loadmore weui-loadmore_line hide enptyCarDiv showCarManager" style="margin-top:30px; "><span class="weui-loadmore__tips">請添加車輛</span></div></div></div></div><script src="/Resources/jquery-weui-1.0.1/lib/jquery-2.1.4.js"></script> <script src="/Resources/jquery-weui-1.0.1/js/jquery-weui.js"></script> <script src="/Scripts/underscore-min.js" type="text/javascript"></script> <!--<script src="/Resources/iscroll-5.2/iscroll.js" type="text/javascript"></script>--> <script src="/Resources/iscroll-5.2/iscroll-lite.js" type="text/javascript"></script> <script src="/Content/iscrollUtils.js" type="text/javascript"></script><script type="text/javascript"> //修改underscore模板標簽_.templateSettings = {interpolate: /\<\@\=(.+?)\@\>/gim,evaluate: /\<\@(.+?)\@\>/gim,escape: /\<\@\-(.+?)\@\>/gim}; </script><!--列表模板--> <script type="text/template" id="listTpl"><@ _.each(List, function(model , i){ @><li class="tab_all-weui-cells-ul-row" index="<@=count + i @>"><div class="weui-cells"><a class="weui-cell weui-cell_access showLaneexlistCxcInfo" index="<@=count + i @>" href="javascript:;"><div class="weui-cell__bd"><p>流水號:<@=model.Laneexserialno @></p><p><@=model.Exstationname@>:<@=model.Exroadname@>(<@=model.Cityname@>/<@=model.Countyareaname@>)</p><p style="font-size: 14px; color: #888;">總:<@=model.TotalweightStr@>/限:<@=model.TotalweightlimitStr@>/超:<@=model.OverloadweightStr@>(噸)</p><p style="font-size: 14px; color: #888;"><@=model.ExtimeStr@></p></div><div class="weui-cell__ft"> <@ if(model.AuditingStatu == 1){ @> <label class="text_warning">未處理</label><@ } else if(model.AuditingStatu == 3){ @> <label class="text_ok">已繳款</label><@ }@> </div></a></div></li><@ }); @> </script><script type="text/javascript">//分頁下標，出站時間戳var Datastamp = 0;//是否正在加載更多var isLoadMore = false;var arrayList = new Array();$(function() {//初始化滾動列表loaded();setTimeout(function() {//初始化數據GetLaneexlistCxcAllByExvehicleplate();}, 100);//彈出超限確認層 監聽IScroll發出事件$("#tab_all").on("tap", ".showLaneexlistCxcInfo", function() {var index = $(this).attr("index");if (index) {var model = arrayList[index];//解析數據var compiled = _.template($('#LaneexlistCxcModelTpl').html());var pDiv = $('#full-speed-manager').find(".content:eq(0)");pDiv.find(".bd").remove()pDiv.append(compiled(model));//彈出超限確認層$("#full-speed-manager").popup();//顯示管理頭部$(".carManagerTopDiv").show()}});$(".closeCarManagerTopDiv").click(function() {//關閉超限確認層$.closePopup()//顯示管理頭部$(".carManagerTopDiv").hide()});});//獲取數據function GetLaneexlistCxcAllByExvehicleplate() {var OcCarNumber = $("#OcCarNumber").html();if (_.isEmpty(OcCarNumber)) {//隱藏加載完畢$("#tab_all").find(".loadOverDiv").hide();//隱藏空數據圖層$("#tab_all").find(".enptyDiv").hide();//顯示添加車輛圖層$("#tab_all").find(".enptyCarDiv").show();$("#tab_all").find(".firstLodingLi").hide();//顯示添加車輛圖層showCarManagerDiv();return;}//隱藏添加車輛圖層$("#tab_all").find(".enptyCarDiv").hide();$.ajax({type: "POST",url: "/OffSite/GetLaneexlistCxcAllByExvehicleplate",dataType: "JSON",data: { Exvehicleplate: OcCarNumber, Datastamp: Datastamp },success: function(json) {if (json.Flag) {var List = json.List; //當前數據大小，如果小于30，說明加載完畢if (List.length == 0) {$("#tab_all").find(".firstLodingLi").hide()if (arrayList.length <= 0) {$("#tab_all").find(".enptyDiv").show();} else {$("#tab_all").find(".loadOverDiv").show();}} else {var tempDatastamp = Datastamp;//獲取最后一個時間戳Datastamp = _.last(List).Datastampjson.count = arrayList.length;//解析數據var compiled = _.template($('#listTpl').html());var tab_all = $('#tab_all').find(".tab_all-weui-cells-ul");tab_all.append(compiled(json));if (tempDatastamp == 0) {//顯示加載更多if (List.length >= 30) {//把加載中移動到列表末端tab_all.append($("#tab_all").find(".firstLodingLi").show());} else {//把加載中移動到列表末端tab_all.append($("#tab_all").find(".firstLodingLi").hide());//顯示加載完畢$("#tab_all").find(".loadOverDiv").show();}} else {//顯示加載更多if (List.length >= 30) {//把加載中移動到列表末端tab_all.append(tab_all.find(".firstLodingLi").show());} else {//把加載中移動到列表末端tab_all.append(tab_all.find(".firstLodingLi").hide());//顯示加載完畢$("#tab_all").find(".loadOverDiv").show();}}arrayList.push(List);arrayList = _.flatten(arrayList);setTimeout(function() {//刷新滾動列表myScroll.refresh();//加載更多標記if (List.length >= 30) {isLoadMore = false;}}, 200);//console.log("刷新結束-----");}}},error: function() {console.log("error");$("#tab_all").find(".enptyDiv").show();isLoadMore = false;document.location.href = "/OffSite/Login";}});}var myScroll;//滾動列表初始化function loaded() {myScroll = new IScroll('#wrapper_all_tab', {mouseWheel: true,scrollbars: true,click : false, //關閉點擊事件tap: true //啟動tap事件}); //滾動結束監聽myScroll.on('scrollEnd', function() {if (this.y <= myScroll.maxScrollY ) {if(!isLoadMore){isLoadMore = true;//console.log("isLoadMore");//加載數據GetLaneexlistCxcAllByExvehicleplate();}}});}</script>

?

轉載于:https://my.oschina.net/huqiji/blog/897206

總結

以上是生活随笔為你收集整理的IScroll5 上拉加载更多 及 item点击处理。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。