极客观点
项目管理
HarmonyOS
用better-scroll做上滑到底部(pullUpLoad),加载数据,可是并没有效果.无奈之下,选择了监听scrollEnd.现在我重新搞了demo,可是还是没有效果,哪位大神能看看是怎么回事
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<title>Document</title>
<script>
(function(doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if (!clientWidth) {
return;
}
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
// 此处设置在320px宽的可视区下,1rem = 20px
};
if (!doc.addEventListener) {
return;
}
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
<style>
html,
body,
ul {
padding: 0;
margin: 0;
}
.wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
/* height: 10rem; */
overflow: hidden;
}
ul {
list-style: none;
}
li {
height: 6rem;
line-height: 6rem;
font-size: 16px;
color: red;
background-color: #fff;
border-bottom: 1px solid red;
text-align: center;
}
li:last-child {
border-bottom: none;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="scroll">
<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>
</ul>
</div>
<script type="text/javascript" src="http://img.qfc.cn/static/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript" src="bs.js"></script>
<script>
$(function() {
var wrap = document.querySelector('.wrap'),
s = new BScroll(wrap, {
"pullUpLoad": {
"threshold": -20
}
})
console.log(s)
s.on('pullingDown', function() {
alert(1)
})
})
</script>
</body>
</html>另外better-scroll.js的版本是最新的1.3,https://github.com/ustbhuangyi/better-scroll/blob/master/dist/bscroll.min.js,而不是https://unpkg.com/better-scroll@1.0.1/dist/bscroll.min.js
这里也有一点奇怪 我在1.01中竟然找不到pullingDown方法名
监听的事件错了。上拉加载的事件是pullingUp，不是pullingDown。
另外pullingDown是1.2.0才新增的支持