vue简单实现滚动加载（上拉加载）

---

全局采用弹性盒布局，获取到中间需要需要滚动的区域

    <div id="app" v-cloak>
        <header></header>
        <nav></nav>
        <div class="main" ref="viewBox">
            <article>
                <ul v-for="(item, index) in arr" :key="index">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <p v-show="flag">你已经看到底了哦~</p>
            </article>
        </div>
        <footer></footer>
    </div>

关键css代码：article设置了左右padding的，如果外面不嵌套一层标签的话，滚动条会随着article的padding值往屏幕中间靠近

.main {
    height: 11.58rem;
    overflow-y: auto;
    flex: 1;
}

核心js代码

var vm = new Vue({
    el: '#app',
    data: {
        flag: 0, //是否提示"你已看到底了哦~"
        arr: [], //中间滚动列表
        page: 1, //页码
        onFetching: false, //开关控制是否继续请求数据
    },
    methods: {
        getData() {
            let _this = this;
            ajaxJavaJson('.....', {
                pageSize: 8,
                currentPage: _this.page
            }, function (res) {
                var data = res.data.list;
                _this.arr.push(...data);
            }, function (err) {
                console.log(err.msg);
            });
        },
        scrollLoad() {
　　　　　　　if (this.falls.length < this.page * 7) {
                this.flag = 1
                return this.onFetching = false
            } else {
                this.flag = 0
            }

　　　　　　let nowScotop = window.innerHeight || document.documentElement.clientHeight; //可视区高度

          let lastEle = b[this.falls.length - 1].getBoundingClientRect().bottom //最后一个元素的底边距离

          let footerHeight = this.$refs.footer.offsetHeight //底部的高度

         　　if (this.onFetching) {
                // do nothing
            } else {
                if (nowScotop >= lastEle + footerHeight - 5) {
                    this.onFetching = true
                    setTimeout(() => {
                        this.page += 1
                        this.getData()
                        this.arr.length < this.page * 8 ? this.flag = 1 : this.flag = 0
                        this.onFetching = false
                    }, 500)
                }
            }
        },
    },
    mounted: function () {
        this.$refs.viewBox.addEventListener('scroll', this.scrollLoad, true)
    },
    created: function () {
        this.getData()
    }
});

 补充：修改滚动条样式

/*滚动条样式*/
/*定义滚动条高度及背景 宽高分别对应横竖滚动条的尺寸*/
::webkit-scrollbar{
　　width:1px;  /*宽高可调节，如果为0，则消失*/
　　height:1px;
　　background-color:#eaeaea;
}
/*定义滚动条轨道，内阴影+圆角*/
::webkit-scrollbar-track{
　　-webkit-box-shaow:inset 0 0 6px rgba(0,0,0,0.3)
　　border-radius:10px;
　　background-color:#f5f5f5;
}
/*定义滑块 内阴影+圆角*/
::webkit-scrollbar-thumb{
　　border-radius:10px;
　　-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3)
　　background-color:#555;
}

 蟹蟹点赞~~~