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)
}
})
}
}
}