本文共 2698 字，大约阅读时间需要 8 分钟。

<template>    <div class="test">        <div class="loading-top" v-show="topshow">            <div class="weui-loadmore">                <i class="weui-loading"></i>                <span class="weui-loadmore__tips">正在加载</span>            </div>        </div>        <div class="wrapper" ref="wrapper" :class="{'list-top': topshow}">            <div class="content">                <ul>                    <li>11</li>                    <li>22</li>                    <li>33</li>                    <li>44</li>                    <li>55</li>                    <li>66</li>                    <li>77</li>                    <li>88</li>                    <li>99</li>                </ul>            </div>        </div>    </div></template><script>import BSscroll from 'better-scroll';export default {    name: "TestContent",    data() {        return {            topshow: false        }    },    mounted() {        this.$nextTick(() => {            //$refs绑定元素            if (!this.scroll) {                this.scroll = new BSscroll(this.$refs.wrapper, {                    //开启点击事件, 默认为fasle                    click: true,                    scrollY: true,                    pullUpLoad: {                        threshold: -30, // 当上拉距离超过30px时触发 pullingUp 事件                    },                    pullDownRefresh: {                        threshold: 30, // 下拉距离超过30px触发pullingDown事件                        stop: 20 // 回弹停留在距离顶部20px的位置                    }                })                //上滑加载                this.scroll.on('pullingUp', () => {                    console.log('pullingUp');                    this.scroll.finishPullUp(); // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则上拉事件只会执行一次                })                //下拉刷新                this.scroll.on('pullingDown', () => {                    console.log('pullingDown');                    this.topshow = true;                    setTimeout(() => {                        this.topshow = false;                    }, 2000);                    this.scroll.finishPullDown(); // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则下拉事件只会执行一次                });            } else if (!this.$refs.wrapper) {                return            } else {                this.scroll.refresh()            }        })    }};</script><style lang="stylus" scoped>.test    clear: both    .wrapper        width: 100%        position: absolute        top: 45px        bottom: 50px        overflow: hidden        z-index: 1        li            line-height: 70px            text-align: center            background: orange            margin: 10px 0.loading-top    position: absolute    top: 20px    height: 20px    width: 100%.list-top    top: 80px !important</style>

转载地址：http://gcdwz.baihongyu.com/