js实现下拉加载历史数据

大致思路：
　　1、当鼠标左键按下（移动设备上的touchstart事件）的时候记录下当前鼠标位置的 Y轴坐标；
　　2、当鼠标移动的时候（touchmove事件），记录下鼠标的Y 轴坐标判断滑动轨迹并进行相应的滑块移动；
　　3、当鼠标左键松开（touchend事件）的时候，通过对比鼠标开始和结束的Y轴坐标的距离判断是否应该刷新页面。

html部分

      <div id="l_box">
            <div id="wrapper">
                <div class="outerScroller">
                    <div class="list_loading"><span></span></div>
                    <ul class="scroll">
                        <li v-for="(item,index) in arrList">{{item}}</li>
                    </ul>
                </div>
            </div>
            <footer id="fixedInput">
                <section class="chat border_b border_t">
                    <div class="input_outer border_w" id="focus">
                        <p>请反馈您的问题</p>
                    </div>
                    <span class="icon_lg add_icon"></span>
                </section>
            </footer>
        </div>

js部分

new Vue({
    el: '.outerScroller',
    data: {
        arrList: ["朋友圈1", "朋友圈2", "朋友圈3", "朋友圈4", "朋友圈8", "朋友圈1",
"朋友圈2", "朋友圈3", "朋友圈4", "朋友圈8", "朋友圈2", "朋友圈3", "朋友圈4", "朋友圈1","朋友圈2", "朋友圈3", "朋友圈4", "朋友圈8", "朋友圈2", "朋友圈3", "朋友圈4", "朋友圈1"],
    },
    created: function() {
    },
    mounted: function() {
        var outerScroller = document.querySelector('.outerScroller'); //容器
        var scroll = document.querySelector('.scroll');//需要下拉的容器
        this.PullRefresh(outerScroller, scroll)
    },
    methods: {
        PullRefresh: function(outerScroller, scroll) {
            var touchStart = 0;
            var touchDis = 0;
            var that = this;
            scroll.addEventListener('touchstart', function(event) {
                var touch = event.targetTouches[0];
                touchStart = touch.pageY;
            }, false);
            scroll.addEventListener('touchmove', function(event) {
                var touch = event.targetTouches[0];
                var y = -54 - outerScroller.offsetTop + touch.pageY - touchStart;
                if(y > 0) {
                    y = 0;
                } else if(y < -54) {
                    y = -54;
                }
                outerScroller.style.transform = 'translateY(' + y + 'px)';
            }, false);
            scroll.addEventListener('touchend', function(event) {
                var endY = touchStart - event.changedTouches[0].pageY
                if(endY < -54) {
                    console.log(444444)
                    that.refresh_show = false;
                    that.refresh()
                };
                outerScroller.style.transform = 'translateY(-54px)';
            }, false);
        },
        refresh: function() {
            this.arrList.unshift('朋友圈new');
        }
    }
})

css部分

* {
    margin: 0;
    padding: 0;
}

html {
    min-height: 100%;
    font-size: 100px;
}

li {
    list-style-type: none;
    height: .4rem;
    background: gainsboro;
    border-bottom: solid 1px #fff;
    text-align: center;
    line-height: .4rem;
    font-size: .16rem;
}

.list_loading {
    font-size: .14rem;
    color: #1a1a1a;
    text-align: center;
    line-height: .24rem;
    padding-top: .15rem;
    padding-bottom: .15rem
}

.list_loading span {
    position: relative;
    top: .04rem;
    display: inline-block;
    width: .2rem;
    height: .2rem;
    margin-right: .05rem;
    -webkit-animation: weuiLoading 1s steps(12, end) infinite;
    animation: weuiLoading 1s steps(12, end) infinite;
    background: transparent url(list_loading.png) no-repeat;
    background-size: 100%;
}

@-webkit-keyframes weuiLoading {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
    100% {
        -webkit-transform: rotate3d(0, 0, 1, 360deg);
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

@keyframes weuiLoading {
    0% {
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
    100% {
        -webkit-transform: rotate3d(0, 0, 1, 360deg);
        transform: rotate3d(0, 0, 1, 360deg);
    }
}

.outerScroller {
    transform: translateY(-.54rem);
    transition: .1s all ease;
}

#wrapper {
    overflow: hidden;
}
/*聊天输入框*/
#fixedInput {
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 66666;
}

.chat {
    padding: 0.08rem .15rem;
    width: 100%;
    max-height: 1.5rem;
    position: relative;
    background-color: #f7f7fa;
}

.chat.border_t::before {
    border-top: 1px solid #ccccce;
}

.input_border {
    width: 73%;
    overflow-x: auto;
    overflow-y: scroll;
    min-height: 0.35rem;
    max-height: 0.7rem;
    border-radius: 5px;
    margin-left: 0.08rem;
}

@media (max-width: 359px) {
    .chat div {
        width: 82%;
    }
}

.chat span {
    position: absolute;
    top: 50%;
    margin-top: -0.18rem;
}

.input_outer {
    position: relative;
    width: 88%;
    padding: 1px;
    background-color: #f9f9f9;
}

.input_outer .border_w::before {
    border: 1px solid #dcdcdc;
}

.input_outer p {
    position: relative;
    width: 100%;
    padding: .06rem .05rem;
    color: #949494;
    font-size: .16rem;
}