iScroll實現下拉刷新上拉加載

時間 2019-11-17

標籤 iscroll 實現下拉刷新加載简体版

原文原文鏈接

前言

初學iscroll這個控件，給個人一個感受仍是蠻不錯的。html

什麼是iScroll：是目前最成熟的自定義滾動解決方案之一，在移動端和PC有很好的兼容性。iScroll官方提供了5個不一樣的版本app

iscroll.js 通用版包含了大部分公共特性
iscroll-lite.js 縮減版削減了一些功能特性，例如：滾動條，鼠標滾輪等等
iscroll-probe.js 探索版此版本能夠知足你獲取滾動條位置的需求。
iscroll-zoom.js 滾動縮放版
iscroll-infinite.js 無限制版

使用

代碼思路：利用監聽滾動條的scroll事件，判斷下拉或者上拉的距離，作上觸發距離標記，當scrollEnd事件觸發時，執行數據加載ui

這裏本身要去引用<script src="js/iscroll-probe.js"></script>this

html整個貼圖代碼spa

<!DOCTYPE html>
<html>
<head>
　　<title>pull to refresh</title>
　　<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
　　<script src="js/iscroll-probe.js"></script>
</head>scala

<style>
　　body{
　　　　overflow: :hidden;
　　}
　　body,ul{
　　　　padding: 0;
　　　　margin: 0;
　　}
　　.main {
　　　　position: relative;
　　　　width: 100%;
　　　　height: 100%;
　　}
　　.main .warpper{
　　　　position: absolute;
　　　　width: 100%;
　　}

　　.scroller-pullDown, .scroller-pullUp {
　　　　width: 100%;
　　　　height: 30px;
　　　　padding: 10px 0;
　　　　text-align: center;
　　}
　　.dropdown-list {
　　　　padding: 0;
　　　　margin: 0;
　　}
　　.dropdown-list li {
　　　　width: 100%;
　　　　background: #ddd;
　　　　line-height: 45px;
　　　　text-align: center;
　　　　color: #FFF;
　　　　border-bottom: 1px solid #FFF;
　　}
</style>
<script>
　　//模擬數據
　　var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ,19 , 20];
　　function getContents() {
　　　　var li = "";
　　　　for (var i = 0; i < arr.length; i++) {
　　　　　　li += "<li>Item" + arr[i] + "</li>";
　　　　}
　　　　return li;
　　}
　　function appendContent(content) {
　　　　var ul = document.getElementById('Content');
　　　　ul.innerHTML = ul.innerHTML + content;
　　}
　　//返回文檔中匹配指定 CSS 選擇器的一個元素
　　var pullDown = document.querySelector("#PullDown");
　　var pullUp = document.querySelector("#PullUp");
　　var isPulled = false; // 拉動標記

　　window.onload = function(){
　　　　document.body.style.height = Math.max(document.documentElement.clientHeight,window.innerHeight||0)+'px';
　　　　appendContent(getContents());
　　　　//實例IScroll對象
　　　　var myScroll = new IScroll('#MyScroller', {
　　　　　　//probeType：
　　　　　　// 1 滾動不繁忙的時候觸發
　　　　　　// 2 滾動時每隔必定時間觸發
　　　　　　// 3 每滾動一像素觸發一次
　　　　　　probeType: 3,
　　　　　　//是否監聽鼠標滾輪事件
　　　　　　mouseWheel: true,
　　　　　　//是否顯示默認滾動條
　　　　　　scrollbars: true,
　　　　　　//是否屏蔽默認事件
　　　　　　preventDefault: false,
　　　　　　//是否漸隱滾動條，關掉能夠加速
　　　　　　fadeScrollbars: true
　　　　});

　　　　myScroll.on('scroll',function(){
　　　　　　var height = this.y;
　　　　　　var bottomHeight = this.maxScrollY - height;
　　　　　　//控制下拉顯示
　　　　　　console.log('height',height);
　　　　　　if(height>=60){
　　　　　　　　PullDown.style.display = "block";
　　　　　　　　isPulled = true;
　　　　　　　　return;
　　　　　　}else if(height < 60 && height >= 0){
　　　　　　　　PullDown.style.display = "none";
　　　　　　　　return;
　　　　　　}
　　　　　　//控制上拉顯示
　　　　　　if(bottomHeight >= 60){
　　　　　　　　PullUp.style.display = "block";
　　　　　　　　isPulled = true;
　　　　　　　　return;
　　　　　　}else if (bottomHeight < 60 && bottomHeight >= 0) {
　　　　　　　　PullUp.style.display = "none";
　　　　　　　　return;
　　　　　　}
　　　　})
　　　　myScroll.on('scrollEnd', function() { // 滾動結束
　　　　　　if (isPulled) { // 若是達到觸發條件，則執行加載
　　　　　　　　isPulled = false;
　　　　　　　　appendContent(getContents());
　　　　　　　　myScroll.refresh();
　　　　　　}
　　　　});
　　}
</script>
<body>
<div id="MyScroller" class="main">
　　<div class="warpper">
　　　　<div id="PullDown" class="scroller-pullDown" style="display: none;">
　　　　　　<img style="width: 20px; height: 20px;" src="img/HBuilder.png" />
　　　　　　<span id="pullDown-msg" class="pull-down-msg">下拉刷新</span>
　　　　</div>
　　　　<ul id="Content" class="dropdown-list">
　　　　</ul>
　　　　<div id="PullUp" class="scroller-pullUp" style="display: none;">
　　　　　　<img style="width: 20px; height: 20px;" src="img/HBuilder.png" />
　　　　　　<span id="pullUp-msg" class="pull-up-msg">上拉刷新</span>
　　　　</div>
　　</div>
</div>
</body>
</html>code

參考博客：http://imziv.com/blog/article/read.htm?id=73htm

相關文章

相關標籤/搜索

上拉加載更多

PHP 7 新特性

紅包項目實戰

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<