export default { props: { dataList:{ type: Array, default: [] }, probeType: { type: Number, default: 3 }, click: { type: Boolean, default: true }, pullDownRefresh: { type: null, default: false }, pullUpLoad: { type: null, default: false }, }
组件挂载后，在事件触发时并不直接处理事件，而是向父级发送一个事件，父级通过在模板v-on接收事件并处理后续的逻辑
mounted() { this.scroll = new BScroll(this.$refs.wrapper, { probeType: this.probeType, click: this.click, pullDownRefresh: this.pullDownRefresh, pullUpLoad: this.pullUpLoad, }) this.scroll.on('pullingUp',()=> { if(this.continuePullUp){ this.beforePullUp(); this.$emit("onPullUp","当前状态：上拉加载"); } }); this.scroll.on('pullingDown',()=> { this.beforePullDown(); this.$emit("onPullDown","当前状态：下拉加载更多"); }); }
父组件在使用时，需要传入配置参数Props以及处理子组件发射的事件，并且用具体的内容并替换掉 slot 标签
<Scroller ref="scroll" :dataList="filmList" :pullDownRefresh="DOWN_CONFIG" :pullUpLoad="UP_CONFIG" @onPullUp="pullUpHandle" @onPullDown="pullDownHandle" > <ul> <router-link v-for="(v,i) in filmList" :key="v.id" tag="li" :to='{path:"/film-detail/"+v.id}'> <div> <img v-lazy="v.images.small" alt="" /> </div> <div> <p>{{v.title}}</p> <p>导演：{{filterDirectors(v.directors)}}</p> <p>年份：{{v.year}}<span>{{v.stock}}</span></p> <p>类别：{{v.genres.join(" / ")}}<span></span></p> <p>评分：<span>{{v.rating.average}}分</span></p> </div> </router-link> </ul> </Scroller>
父组件可以通过this.$refs.xxx来获取到子组件，可以调用子组件里面的方法；
computed:{ scrollElement(){ return this.$refs.scroll } }
完整的scroller组件内容如下
<template> <div ref="wrapper"> <div> <slot></slot> <div> <PullingWord v-show="!inPullUp&&dataList.length>0" :loadingWord="beforePullUpWord"></PullingWord> <Loading v-show="inPullUp" :loadingWord='PullingUpWord'></Loading> </div> </div> <transition> <Loading v-show="inPullDown" :loadingWord='PullingDownWord'></Loading> </transition> </div> </template> <script > import BScroll from 'better-scroll' import Loading from './loading.vue' import PullingWord from './pulling-word' const PullingUpWord="正在拼命加载中..."; const beforePullUpWord="上拉加载更多"; const finishPullUpWord="加载完成"; const PullingDownWord="加载中..."; export default { props: { dataList:{ type: Array, default: [] }, probeType: { type: Number, default: 3 }, click: { type: Boolean, default: true }, pullDownRefresh: { type: null, default: false }, pullUpLoad: { type: null, default: false }, }, data() { return { scroll:null, inPullUp:false, inPullDown:false, beforePullUpWord, PullingUpWord, PullingDownWord, continuePullUp:true } }, mounted() { setTimeout(()=>{ this.initScroll(); this.scroll.on('pullingUp',()=> { if(this.continuePullUp){ this.beforePullUp(); this.$emit("onPullUp","当前状态：上拉加载"); } }); this.scroll.on('pullingDown',()=> { this.beforePullDown(); this.$emit("onPullDown","当前状态：下拉加载更多"); }); },20) }, methods: { initScroll() { if (!this.$refs.wrapper) { return } this.scroll = new BScroll(this.$refs.wrapper, { probeType: this.probeType, click: this.click, pullDownRefresh: this.pullDownRefresh, pullUpLoad: this.pullUpLoad, }) }, beforePullUp(){ this.PullingUpWord=PullingUpWord; this.inPullUp=true; }, beforePullDown(){ this.disable(); this.inPullDown=true; }, finish(type){ this["finish"+type](); this.enable(); this["in"+type]=false; }, disable() { this.scroll && this.scroll.disable() }, enable() { this.scroll && this.scroll.enable() }, refresh() { this.scroll && this.scroll.refresh() }, finishPullDown(){ this.scroll&&this.scroll.finishPullDown() }, finishPullUp(){ this.scroll&&this.scroll.finishPullUp() }, }, watch: { dataList() { this.$nextTick(()=>{ this.refresh(); }) } }, components: { Loading, PullingWord } } </script>
具体内容可以查看github , 项目地址如下：https://github.com/linrunzheng/vueApp