Better-Scroll与Vue的结合使用

Better-Scroll与Vue的结合使用

本按例是将vue与better-scroll结合起来进行的一个封装使用，来实现一个下拉刷新的效果

index.vue文件

<template>
    <div class="index">
        <ul class="topNav">
            <li :class="{active:pageType==0}" @click="pageType=0">影片</li>
            <li :class="{active:pageType==1}" @click="pageType=1">影院</li>
        </ul>
        <div class="content">
           <b-scroll :pullDownRefresh="true" @pulldownRefresh='pulldownRefreshHandler'>
               <div class="item" v-for="(item,index) in 20" :key="index" >第{{index+1}}项</div>
           </b-scroll>
        </div>
    </div>
</template>

<script>
    /* eslint-disable */
    import BScroll from "../components/BScroll.vue"
    export default {
        name: "index",
        data() {
            return {
                pageType: 0,
                scroll: null
            }
        },
        mounted() {
             
            
        },
        methods: {
            pulldownRefreshHandler (scroll) {
                console.log(scroll);
                setTimeout(() => {
                    console.log('时间到');
                    scroll.refresh();
                }, 5000);
             }
        },
        computed: {

        },
        components: {
            BScroll
        }
    }
</script>

<style scoped>
    .index {
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .topNav {
        height: 45px;
        display: flex;
    }

    .topNav>li {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        border-bottom: 2px solid lightgray;
    }

    .topNav>li.active {
        border-bottom-color: tomato;
    }

    .content {
        flex: 1;
        background-color: lightblue;
        overflow: hidden;
    }

    .item {
        height: 45px;
        border-bottom: 1px solid black;
        display: flex;
        flex-direction: row;
        align-items: center;
        box-sizing: border-box;
        padding-left: 20px;
        font-size: 14px;
    }
</style>

BScroll文件

<template>
    <div class="scrollView" ref="scroll">
        <div class="wrap">
            <slot></slot>
        </div>
        
    </div>
</template>

<script>
/* eslint-disable */
import BetterScroll from 'better-scroll'
export default {
    name:'BScroll',
    data () {
        return {
            scroll: null
        }
    },
    props: {
        click: {
            type: Boolean,
            default: true
        },
        pullDownRefresh: {
            type: Boolean,
            default: false
        }
    },
    mounted () {
        this.$nextTick(() => {
            if(!this.scroll){
                this.scroll=new BetterScroll(this.$refs.scroll,{
                    click:this.click,
                    pullDownRefresh:this.pullDownRefresh
                })
                if(this.pullDownRefresh){
                    this.scroll.on("touchEnd",(pos) => {
                        if(pos.y > 50){
                            this.$emit("pulldownRefresh",this.scroll);
                        }
                    })
                }
            }
            else{
                this.scroll.refresh()
            }
        })
    }
}
</script>

<style scoped>
.scrollView{
    height: 100%;
}
</style>

具体情况可参考：better-scroll官网