better-scroll的使用

最新推荐文章于 2022-05-22 10:21:06 发布

weixin_34007906

最新推荐文章于 2022-05-22 10:21:06 发布

阅读量160

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/u/2489258/blog/3002677

版权

2019独角兽企业重金招聘Python工程师标准>>>

目的：需要在手机端实现上拉加载数据，下拉刷新页面的功能。
使用的控件：better-scroll
难点：目前的better-scroll都是和vue一起使用，公司用的是angularjs1.x，所以需要最原始的使用然后封装成指令。

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

wrapper里只能有一层元素，也就是需要滚动的元素，使用了better-scroll之后，会自动在content加上动画的样式。

<!-- 这种结构是不可以滚动的 -->
<div class="wrapper">
    <ul class="content">
      ...
    </ul>
    <ul class="content">
      ...
    </ul>
</div>
<!-- 如果需要滚动的话加一层div包裹着两个ul标签 -->

wrapper一定需要指定高度，不然是无法滚动的。
需要看系统使用的定位是absolute还是flex，如果是flex是有默认的高度的，就不需要自己手动设置wrapper的高度。

<script>
// wraper高度的计算，needSubHeight就是标题栏、底部导航栏等的遮挡物的高度
var height = document.body.offsetHeight - needSubHeight;
</script>

在这里补上demo，better-scroll的版本为：v1.13.4

<!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封装之后的代码：

/**
* 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;
   }
});

转载于:https://my.oschina.net/u/2489258/blog/3002677