zepto.js + iscroll.js上拉加載下拉加載的移動端新聞列表頁面

時間 2019-12-20

標籤 zepto.js zepto iscroll.js iscroll 加載下拉移動列表頁面欄目 JavaScript 简体版

原文原文鏈接

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title>Document</title> <link rel="stylesheet" type="text/css" href="public/reset.css"> <style type="text/css"> .top{     top: 0; } .footer{     bottom: 0; } .top,.footer{     position: fixed;     left: 0;     text-align: center;     line-height: 50px;     height: 50px;     width: 100%;     background-color: #0dcecb;     color: #fff;     z-index: 100; } #wrapper{     position: absolute;     left: 0;     top: 50px;     bottom: 50px;     width: 100%;     background-color: #fafafa;     z-index: 10; } .news-lists .item{     height: 40px;     line-height: 40px;     border-bottom: 1px solid #CFCFCF; } #pullDown, #pullUp {     background:#fff;     height:40px;     line-height:40px;     padding:5px 10px;     border-bottom:1px solid #ccc;     font-weight:bold;     font-size:14px;     color:#888; } #pullDown .pullDownIcon, #pullUp .pullUpIcon  {     display:block; float:left;     width:40px; height:40px;     background:url(public/pull-icon@2x.png) 0 0 no-repeat;     -webkit-background-size:40px 80px;     background-size:40px 80px;     -webkit-transition-property:-webkit-transform;     -webkit-transition-duration:250ms; } #pullDown .pullDownIcon {     -webkit-transform:rotate(0deg) translateZ(0); } #pullUp .pullUpIcon  {     -webkit-transform:rotate(-180deg) translateZ(0); } #pullDown.flip .pullDownIcon {     -webkit-transform:rotate(-180deg) translateZ(0); } #pullUp.flip .pullUpIcon {     -webkit-transform:rotate(0deg) translateZ(0); } #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {     background-position:0 100%;     -webkit-transform:rotate(0deg) translateZ(0);     -webkit-transition-duration:0ms;          -webkit-animation-name:loading;     -webkit-animation-duration:2s;     -webkit-animation-iteration-count:infinite;     -webkit-animation-timing-function:linear; } @-webkit-keyframes loading {     from { -webkit-transform:rotate(0deg) translateZ(0); }     to { -webkit-transform:rotate(360deg) translateZ(0); } } </style> </head> <body>     <div class="top"> 頁面導航 </div> <div id="wrapper"> <div id="scroller"> <div id="pullDown"> <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span> </div> <div class="news-lists" id="news-lists"> <div class="item">根據市場獎懲制度，結合市場各部門提供的數據</div> <div class="item">根據市場獎懲制度，結合市場各部門提供的數據</div> <div class="item">根據市場獎懲制度，結合市場各部門提供的數據</div> <div class="item">根據市場獎懲制度，結合市場各部門提供的數據</div> <div class="item">根據市場獎懲制度，結合市場各部門提供的數據</div> <div class="item">根據市場獎懲制度，結合市場各部門提供的數據</div> <div class="item">根據市場獎懲制度，結合市場各部門提供的數據</div> <div class="item">根據市場獎懲制度，結合市場各部門提供的數據</div> <div class="item">根據市場獎懲制度，結合市場各部門提供的數據</div> <div class="item">根據市場獎懲制度，結合市場各部門提供的數據</div> <div class="item">根據市場獎懲制度，結合市場各部門提供的數據</div> <div class="item">根據市場獎懲制度，結合市場各部門提供的數據</div> <div class="item">根據市場獎懲制度，結合市場各部門提供的數據</div> <div class="item">根據市場獎懲制度，結合市場各部門提供的數據</div> <div class="item">根據市場獎懲制度，結合市場各部門提供的數據</div> </div> <div id="pullUp"> <span class="pullUpIcon"></span><span class="pullUpLabel">上拉加載更多...</span> </div> </div> </div> <div class="footer"> 底部導航 </div> </body> </html> <script type="text/javascript" src="public/zepto.js"></script> <script type="text/javascript" src="public/iscroll.js"></script> <script type="text/javascript">     var data, myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0; function pullDownAction () { $.getJSON('public/test.json', function (data, state) { if (data && data.state == 1 && state == 'success') { //本地測試，爲了看到加載中效果故加上定時器 setTimeout(function () { $('#news-lists').before(data.data); myScroll.refresh(); }, 600); } }); } function pullUpAction () { $.getJSON('public/test.json', function (data, state) { if (data && data.state == 1 && state == 'success') { //本地測試，爲了看到加載中效果故加上定時器 setTimeout(function () { $('#news-lists').append(data.data); myScroll.refresh(); }, 600); } }); } //去除瀏覽器默認事件 document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); //domready後綁定初始化事件 document.addEventListener('DOMContentLoaded', loaded, false); function loaded() { pullDownEl = document.getElementById('pullDown'); pullDownOffset = pullDownEl.offsetHeight; pullUpEl = document.getElementById('pullUp'); pullUpOffset = pullUpEl.offsetHeight; /**  * 初始化iScroll控件  */ myScroll = new iScroll('wrapper', { vScrollbar : false, topOffset : pullDownOffset, onRefresh : function () { if (pullDownEl.className.match('loading')) { pullDownEl.className = ''; pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...'; } else if (pullUpEl.className.match('loading')) { pullUpEl.className = ''; pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加載更多...'; } }, onScrollMove: function () { if (this.y > 5 && !pullDownEl.className.match('flip')) { pullDownEl.className = 'flip'; pullDownEl.querySelector('.pullDownLabel').innerHTML = '鬆手開始更新...'; this.minScrollY = 0; } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) { pullUpEl.className = 'flip'; pullUpEl.querySelector('.pullUpLabel').innerHTML = '鬆手開始更新...'; } }, onScrollEnd: function () { if (pullDownEl.className.match('flip')) { pullDownEl.className = 'loading'; pullDownEl.querySelector('.pullDownLabel').innerHTML = '加載中...'; pullDownAction(); } else if (pullUpEl.className.match('flip')) { pullUpEl.className = 'loading'; pullUpEl.querySelector('.pullUpLabel').innerHTML = '加載中...'; pullUpAction(); } } }); } </script>