uniapp上拉加载更多_H5 上拉刷新 下拉加载更多

  项目上用到的方法，在此记录一下

window.onscroll = function () {    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;    var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;    if (scrollTop + windowHeight == scrollHeight) {        console.log('触底加载更多');    }}

整体代码：

CSS

<style>        #refreshContainer li {            background-color: #eee;            margin-bottom: 1px;            padding: 20px 10px;        }        .refreshText {            position: absolute;            width: 100%;            line-height: 50px;            text-align: center;            left: 0;            top: 0;        }style>

HTML

    <p class="refreshText">p>    <ul id="refreshContainer">        <li>111li>        <li>222li>        <li>333li>        <li>444li>        <li>555li>        <li>111li>        <li>222li>        <li>333li>        <li>444li>        <li>555li>        <li>111li>        <li>222li>        <li>333li>        <li>444li>        <li>555li>    ul>

JS

(function (window, document, undefined) {    var upDownRefresh = function (box, text) {        var _element = document.getElementById(box),            _refreshText = document.querySelector(text),            _startPos = 0,            _transitionHeight = 0;        _element.addEventListener('touchstart', function (e) {            console.log('初始位置：', e.touches[0].pageY);            _startPos = e.touches[0].pageY;            _element.style.position = 'relative';            _element.style.transition = 'transform 0s';        }, false);        _element.addEventListener('touchmove', function (e) {            // console.log('当前位置：', e.touches[0].pageY);            _transitionHeight = e.touches[0].pageY - _startPos;            console.log(_transitionHeight)            if (_transitionHeight > 0 && _transitionHeight < 60) {                _refreshText.innerText = '下拉刷新';                _element.style.transform = 'translateY(' + _transitionHeight + 'px)';            }        }, false);        _element.addEventListener('touchend', function (e) {            if (_transitionHeight > 55) {                _refreshText.innerText = '更新中...';                console.log("触发更新")            }            _element.style.transition = 'transform 0.5s ease 1s';            _element.style.transform = 'translateY(0px)';        }, false);        window.onscroll = function () {            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;            var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;            var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;            if (scrollTop + windowHeight == scrollHeight) {                console.log('触底加载更多')            }        }    };    window.upDownRefresh = upDownRefresh;})(window, document);new upDownRefresh("refreshContainer", ".refreshText")

 之前做小程序项目的时候也有涉及到上拉刷新、下滑加载的内容，小程序内部提供相应的方法，只需要在内部编写我们需要加载的内容即可，方法也比较好用。

(1)监听用户下拉刷新：

onPullDownRefresh: function () {    console.log('上拉刷新');},

注意下拉的动作，需要同步在对应的json文件中去定义，否则单js文件内设置并不会生效：

"enablePullDownRefresh":true

(2)页面上拉触底事件的处理函数：

onReachBottom: function () {    console.log('触底加载更多');}