better-scroll实现上拉下拉 @劉䔳

首先先安装better-scroll插件

cnpm install better-scroll
npm install better-scroll
yarn add better-scroll

接下来，第二步是在项目中引入better-scroll对象import Bscroll from 'better-scroll'

import RecommendList from "../Recommend/RecommendList"

html中

<div>
<header></header>
<div class="wrapper" ref="wrapper">
        <div class="content">
            
        </div>
</div>
<footer></footer>
</div>

js中、

 mounted() {
        this.$nextTick(() => {
            //$refs绑定元素
            if(!this.scroll){
                this.scroll = new BScroll(this.$refs.wrapper, {
                    //开启点击事件 默认为false
                    click:true,
                    scrollX:true,
                })
                console.log(this.scroll)
            }else if(!this.$refs.wrapper){
                return
            }
            else{
                this.scroll.refresh()
            }
        })
    },

css中

 div{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    header{
        width: 100%;
        height: 50px;
    }
    .wrapper{
        width: 100%;
        height: 100%;
        flex: 1;
        touch-action: auto;
        overflow: auto;
        >div{
            min-height: 101%;
            width: 100%;
        }
    }
    footer{
        width: 100%;
        height: 50px;
    }
}