vue封装全局组件

1，在components中新建文件夹Scroller

在Scroller中新建文件index.vue

在index.vue中写上下面的代码

<template>
    <div class="wrapper" ref="wrapper">
        <slot></slot>
    </div>
</template>

<script>
import BScroll from 'better-scroll';
export default{
    props:{        //父子通信
        handleToScroll:{
            type:Function,
            default:function(){}
        },
        handleToTouchEnd:{
            type:Function,
            default:function(){}
        }
    },
    mounted(){
        var scroll = new BScroll(this.$refs.wrapper,{
            tap:true,
            probeType:1     //截流
        });

        scroll.on('scroll',(pos)=>{
            this.handleToScroll(pos)
        })

        scroll.on('touchEnd',(pos)=>{
            this.handleToTouchEnd(pos)
        })
    }
}
</script>

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

2.在main.js中

import Scroller from '@/components/Scroller'
Vue.component('Scroller',Scroller)

3.封装好了之后用法

在需要用到的地方用<Scroller> </Scroller> 将html代码包起来，和div的用法差不多

<template>
        <!--ref="movie_body"是为了可以找到dom元素-->
        <div class="movie_body" ref="movie_body">
            <Scroller :handleToScroll="handleToScroll" :handleToTouchEnd="handleToTouchEnd">
                <ul>
                    <li>
                        111
                    </li>
                </ul>
                </Scroller>
        </div>
    </template>

 

methods:{
                handleToDetail(){
                    console.log('handleToDetail')
                },
                handleToScroll(pos){
                    if(pos.y > 30){
                        this.pullDownMsg = '正在更新中'
                    }
                },
                handleToTouchEnd(pos){
                    if(pos.y > 30){
                        this.axios.get('/api/movieOnInfoList?cityId=10').then((res)=>{
                            var msg = res.data.msg;
                            if(msg === 'ok'){
                                this.pullDownMsg = '更新成功'
                                setTimeout(()=>{
                                    this.movieList = res.data.data.movieList;
                                    this.pullDownMsg = ''
                                },1000)
                            }
                        })
                    }
                }
            }