better-scroll的使用

時間 2019-11-12

標籤 better scroll 使用简体版

原文原文鏈接

目的：須要在手機端實現上拉加載數據，下拉刷新頁面的功能。
使用的控件：better-scroll
難點：目前的better-scroll都是和vue一塊兒使用，公司用的是angularjs1.x，因此須要最原始的使用而後封裝成指令。css

<div class="wrapper">
    <ul class="content">
      <li>...</li>
      <li>...</li>
      ...
    </ul>
</div>

wrapper裏只能有一層元素，也就是須要滾動的元素，使用了better-scroll以後，會自動在content加上動畫的樣式。html

<!-- 這種結構是不能夠滾動的 -->
<div class="wrapper">
    <ul class="content">
      ...
    </ul>
    <ul class="content">
      ...
    </ul>
</div>
<!-- 若是須要滾動的話加一層div包裹着兩個ul標籤 -->

wrapper必定須要指定高度，否則是沒法滾動的。
須要看系統使用的定位是absolute仍是flex，若是是flex是有默認的高度的，就不須要本身手動設置wrapper的高度。vue

<script>
// wraper高度的計算，needSubHeight就是標題欄、底部導航欄等的遮擋物的高度
var height = document.body.offsetHeight - needSubHeight;
</script>

在這裏補上demo，better-scroll的版本爲：v1.13.4jquery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <script src="https://cdn.bootcss.com/jquery/1.8.2/jquery.js"></script>
    <title>下拉刷新上拉加載</title>
    <style type="text/css">
        body {
            background-color: beige;
            padding: 0;
        }
        div {
            margin: 0;
            padding: 0;
        }
        .wrapper {
            height: 150px;
            width: 100%;
            position: relative;
        }
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        ul li {
            text-align: center;
            border: 1px solid rgba(166, 166, 166, 0.4);
        }
        /* 全局提示信息 */
        .alert{
            display: none;
            position: fixed;
            top: 55px;
            left: 0;
            z-index: 2;
            width: 100%;
            height: 35px;
            line-height: 35px;
            text-align: center;
            color: #fff;
            font-size: 12px;
            background: rgba(7, 17, 27, 0.7);
        }
    </style>
</head>
<body>
<div class="wrapper wrapper-hook" style="overflow: hidden;">
	<!-- 內層元素不能設置高度 -->
    <ul class="content">
        <li>測試數據1</li>
        <li>測試數據2</li>
        <li>測試數據3</li>
        <li>測試數據4</li>
        <li>測試數據5</li>
        <li>測試數據6</li>
        <li>測試數據7</li>
        <li>測試數據8</li>
        <li>測試數據9</li>
        <li>測試數據10</li>
        <li>測試數據11</li>
        <li>測試數據12</li>
        <li>測試數據13</li>
        <li>測試數據14</li>
        <li>測試數據15</li>
    </ul>
</div>
<div class="alert alert-hook"></div>
<script src="bscroll.js"></script>
<script>
setTimeout(function() {
	var wrapper = document.querySelector('.wrapper-hook');
	function scrollOption () {};
	scrollOption.prototype = {
		click: true,
	    probeType: 1,
	    pullUpLoad: {
	        threshold: -20,   // 負值表示當上拉距離超過底部 --px 時觸發 pullingUp 事件
	        stop: 10
	    },
	}
	// 能夠根據傳入的參數控制是否開啓下拉刷新
	scrollOption.prototype.pullDownRefresh = {
	    threshold: 20,  // 當下拉到超過頂部 --px 時，觸發 pullingDown 事件
	    stop: 10        // 刷新數據的過程當中，回彈停留在距離頂部 --px 的位置
	};

	// 點擊事件若是執行兩次，把button標籤改成a標籤、或者用@tag代替點擊事件
	var scroll = new BScroll(wrapper, new scrollOption());
	console.log(scroll);

	// 上拉加載
	scroll.on('pullingUp', function () {
        refreshAlert('加載中...');
	    loadData();
	    scroll.refresh();
	    scroll.finishPullUp(); // 當上拉加載數據加載完畢後，須要調用此方法告訴 better-scroll 數據已加載。
	});

	// 下拉刷新
	scroll.on('pullingDown', function () {
        refreshAlert('刷新成功');
	    scroll.refresh();
	    scroll.finishPullDown(); // 當下拉刷新數據加載完畢後，須要調用此方法告訴 better-scroll 數據已加載。
	});
}, 500);

// 加載數據
function loadData() {
    var content = document.querySelector('.content');
    var li = document.createElement("li");
    li.appendChild(document.createTextNode("111"));
    content.appendChild(li);
}

var alert = document.querySelector('.alert-hook');
// 刷新成功提示方法
function refreshAlert(text) {
  text = text || '操做成功';
  alert.innerText = text; 
  alert.style.display = 'block';
  setTimeout(function(){
    alert.style.display = 'none';
  },1000);
}
</script>
</body>
</html>

給出我是用angularjs封裝以後的代碼：git

/**
* http://ustbhuangyi.github.io/better-scroll/doc/zh-hans/
* 下拉刷新頁面
* 上拉加載數據
*/
utilModule.factory("gScroll", function($timeout) {
   return function($scope, elemId, paginator, loadMoreData, refreshPage) {
	   var gScroll = {
		   globalScroll: null,
		   scrollHeight: function(needSubHeight) {
			   return document.body.offsetHeight - needSubHeight;
		   },
		   refresh: function() {
			   this.globalScroll && this.globalScroll.refresh(); // if(a){} 當a爲空串或null或undefined時，結果爲false
		   },
		   finishPullUp: function() {
			   if (this.globalScroll) {
				   this.globalScroll.refresh();
				   this.globalScroll.finishPullUp(); // 當上拉加載數據加載完畢後，須要調用此方法告訴 better-scroll 數據已加載。
			   }
		   },
		   pullingDown: function() {
			   if (this.globalScroll) {
				   this.globalScroll.refresh();
				   this.globalScroll.finishPullDown(); // 當下拉刷新數據加載完畢後，須要調用此方法告訴 better-scroll 數據已加載。
			   } 
		   },
		   destroy: function() {
			   if (this.globalScroll) {
				   this.globalScroll.destroy(); // 銷燬 better-scroll，解綁事件
			   }
		   },
		   initScroll: function() {
			   var that = this;
			   $timeout(function(){
				   var wrapper = document.getElementById(elemId);
				   function scrollOption () {};
				   scrollOption.prototype = {
					    click: true,
					    probeType: 1,
					    pullUpLoad: {
					        threshold: -65,   // 負值表示當上拉距離超過底部 --px 時觸發 pullingUp 事件
					        //stop: 10
					    },
					}
					
					// 能夠根據傳入的參數控制是否開啓下拉刷新
					scrollOption.prototype.pullDownRefresh = {
					    threshold: 30,  // 當下拉到超過頂部 --px 時，觸發 pullingDown 事件
					    stop: 10        // 刷新數據的過程當中，回彈停留在距離頂部 --px 的位置
					};
					
					// 點擊事件若是執行兩次，把button標籤改成a標籤、或者用@tag代替點擊事件
					var scroll = new BScroll(wrapper, new scrollOption());
					that.globalScroll = scroll; // 給全局的scroll賦值
					scroll.refresh();  // 先計算一次滾動的高度
					// 上拉加載
					scroll.on('pullingUp', function () {
		      		   if (paginator && angular.isFunction(paginator.loadNext)) {
		      			    paginator.loadNext(function() {

				      	    });
		      		    } else if (angular.isFunction(loadMoreData)) {
		      		    	loadMoreData();
		      		    }
					    scroll.refresh();
					    scroll.finishPullUp(); 
					});

					// 下拉刷新
					scroll.on('pullingDown', function () {
	      			    if (paginator && angular.isFunction(paginator.reload)) {
		      				paginator.reload(function() {

			      			}); 
		      			} else if (angular.isFunction(refreshPage)) {
		      				refreshPage();
		      			}
					    scroll.refresh();
					    scroll.finishPullDown(); 
					});
			   },200);		   
		   },
	   }
	   return gScroll;
   }
});

相關標籤/搜索

每日一句

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