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;
}

 蟹蟹點贊~~~