原生js 实现scroll区域的上拉加载更多

        今天要实现一个下拉刷新页面,第一方案是采用mui里集成的下拉刷新上拉加载更多,但结果发现在我们的情景下实现起来很麻烦.于是我决定用原生的js来实现.

        首先我们要了解下拉刷新的原理,很简单就是当滑动条触及到可滑动区域的底部就是触发刷新事件.那怎么才能知道滑动条触及到底部呢,我们需要了解几个参数scrollTop、clientHeight、scrollHeight。

        我们先讲scrollHeight是整个可滑动区域的高度包括不可见部分的,比如的滑动区域高度是500px,而你的整个滑动区域刚好能显示两页,那么scrollHeight的高度就是1000px.而clientHeight就是你所设置的可滑动区域的可视高度.就是上面所说的500px.最后scrollTop这个参数就是滑动条的顶部与整个scrollHeight顶部的的距离.

        下图是滑动条在顶端时三个参数的值

这是滑动条在底部时三个参数的值

        由此我们很容易得出当scrollTop加上clientHeight等于scrollHeight时便是滑动条到达底部的时候.

        onscroll方法就是在可滑动区域,当区域被滑动时触发的事件,在这个事件中加入对scrollTop加上clientHeight等于scrollHeight的判断,到达底部便发起了数据请求.当请求页码和总页码相等时代表没有数据了,若小于总页码就是还有数据可以获取.继续获取数据并添加.

        当然我们做上拉加载更多就是为了分页,当有新数据来的时候,scrollHeight会随着整个可滑动区域的数据增加而增加.下面给出代码.

布局:

<div id="scroll1" style="overflow-y: auto;height: 86%;position: absolute;width:100%;margin-top: 2%;overflow: scroll;" onscroll="moreData()">
				<div class="mui-table-view" style="margin-top: 2%;" v-for="rechargeItem in rechargeRecordList">
					<li class="mui-table-view-cell" style="margin: 0;">
						<div>
							<label>{{rechargeItem.hospitalAreaName}}</label>
							<label style="color: #00B0B4;" class="mui-pull-right">{{getStateNameByCode(rechargeItem.state)}}</label>
						</div>
						<div>
							<p style="color: #999999;font-size: small;">{{rechargeItem.createTime}}</p>
						</div>
						<div>
							<label style="color: #999999;font-size: small;">订单号：{{rechargeItem.paymentSn}}</label>
							<label class="mui-pull-right" style="font-size: large;">{{rechargeItem.amount}} 元</label>
						</div>
					</li>
				</div>
			</div>

js:滑动时触发的事件

function moreData() {
//				vm.patientInfo.hospitalCard = getScrollTop() + "滚动条" + getClientHeight() + "可视高度" + getScrollHeight() + "文档高度";
				if(getScrollTop() + getClientHeight() == getScrollHeight()) {
					console.log("下一次请求页码" + pageNo + "总页码" + totalPage);
					if(pageNo <= totalPage) {
						queryRemainRechargeList();//获取数据的方法
					} else {
						toast("没有更多了")
					}
				}
			}

js:获取滚动条当前的位置

function getScrollTop() {
				var scrollTop = 0;
				scrollTop = document.getElementById("scroll1").scrollTop;
				return scrollTop;
			}

js:获取当前可视范围的高度

function getClientHeight() {
				var clientHeight = 0;
				clientHeight = document.getElementById("scroll1").clientHeight;
				return clientHeight;
			}

js:获取文档完整的高度

function getScrollHeight() {
				return document.getElementById("scroll1").scrollHeight;
			}