vue BScroll入坑

BScroll文档 可以参考一下，第一次用的时候遇到挺多问题的，还是靠自己耐心慢慢的解决问题。这个例子是实现上拉刷新加载数据。

第一步 下载

npm install @better-scroll/core --save

npm install @better-scroll/pull-up --save

第二步 引用

import Bscroll from '@better-scroll/core'

import PullUp from '@better-scroll/pull-up'

第三步 使用

注意

• better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略；
• 外盒子设置固定宽或高和属性：overflow: hidden；
• 当 content的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动了，这就是 better-scroll 的滚动原理；
• 有时候上拉刷新的时候加载数据会回到顶部，我在方法里记录startY的位置；
• 点击展开的时候底部被遮住，可以用padding-bottom 撑开。

import Bscroll from '@better-scroll/core'
import PullUp from '@better-scroll/pull-up'
<script>
data() {
    return {
        boxList: [],
        loadingMore: '正在加载',
        isLoading: false,
        pageNum: 1,
        totalCount: 0,
        nomore: false,
        isshowTitle:false
    };
}
  </script>

上拉到底部得时候，就弹到顶部了，我这边使用得方法是记录scroll.y得高度然后再scrollY赋值，就能避免这个问题，好像有些手机会不兼容

methods: {
    iniScroll() {
            let that = this
            Bscroll.use(PullUp)
            that.scroll = new Bscroll(that.$refs.wrapper, {
                probeType: 3,
                scrollY: true,
                click: true,
                startY: that.setStartY,
                pullUpLoad: true,
                pullDownRefresh: {
                    threshold: 50,
                    stop: 0
                }
            })
            that.scroll.on('pullingUp', that.pullingUpHandle)
        },
        async pullingUpHandle() {
            let that = this
            that.isLoading = true
            that.setStartY = that.scroll.y
            console.log(that.setStartY)
            that.pageNum++
            if (!this.isMore) {
                that.scroll.finishPullUp()
                that.nomore = true
                that.isLoading = false
                return
            }
            await that.getList()

            that.scroll.refresh()
            that.scroll.finishPullUp()

        },
},

.box_item {
    position: absolute;
    top: 380px;
    bottom: 10px;
    width: 100%;
    overflow: hidden;
    padding: 0 45px 45px;
    box-sizing: border-box;
    background: #f7f7f7;
    .box_msg{
        padding-bottom: 80px
    }
    
}