为了账号安全,请及时绑定邮箱和手机立即绑定

求大佬指点哈!关于vue,better-scroll pulldown触发问题,怎么解决?~求解答!

求大佬指点哈!关于vue,better-scroll pulldown触发问题,怎么解决?~求解答!

拉丁的传说 2019-06-09 09:56:48
{{showMsg}}importBScrollfrom'better-scroll'exportdefault{data(){return{showMsg:'下拉刷新...',show:false,}},props:{probeType:{type:Number,default:1},click:{type:Boolean,default:true},listenScroll:{type:Boolean,default:true},data:{type:Array|Object,default:null},pullup:{type:Boolean,default:true},pulldown:{type:Boolean,default:true},beforeScroll:{type:Boolean,default:false},refreshDelay:{type:Number,default:20},pullUpLoad:{type:Boolean,default:true},msg:{type:String,default:''},pullDownRefresh:{type:Boolean|Object,default:true}},mounted(){setTimeout(()=>{this._initScroll()},20)},computed:{msgCol(){switch(this.msg){case'black':return`color:#2f2725`default:return`color:#fff`}}},methods:{_initScroll(){if(!this.$refs.wrapper){return}this.scroll=newBScroll(this.$refs.wrapper,{probeType:this.probeType,click:this.click,pullDownRefresh:{threshold:50,stop:20},pullUpLoad:{threshold:-50}})if(this.listenScroll){letme=thisthis.scroll.on('scroll',pos=>{if(pos.y>50){this.show=truethis.showMsg='加载中...'}})}if(this.pullup){//上拉加载this.scroll.on('pullingUp',()=>{console.log(111)this.$emit('nextPage')this.scroll.finishPullUp()this.scroll.refresh()})}if(this.pulldown){//下拉刷新this.scroll.on('pullingDown',(pos)=>{this.$emit('pulldown')})}if(this.beforeScroll){this.scroll.on('beforeScrollStart',()=>{this.$emit('beforeScroll')})}},disable(){this.scroll&&this.scroll.disable()},enable(){this.scroll&&this.scroll.enable()},refresh(){this.scroll&&this.scroll.refresh()},scrollTo(){this.scroll&&this.scroll.scrollTo.apply(this.scroll,arguments)},scrollToElement(){this.scroll&&this.scroll.scrollToElement.apply(this.scroll,arguments)}},watch:{data(){setTimeout(()=>{this.refresh()},this.refreshDelay)}}}" _ue_custom_node_="true">
查看完整描述

2 回答

?
心有法竹

TA贡献1866条经验 获得超5个赞

组件应该没啥问题,使用的时候得增加一些判断,防止重复请求。
data(){
return{
isLoaded:false//以此来判断数据是否加载完了
}
},
methods:{
getNextPage(){
//只有isLoaded为false的时候才去加载数据,这样不就不会重复去请求接口了
if(!this.isLoaded){
this.isLoaded=true
//数据请求
axios.get('/api/xxx')
.then(res=>{
//请求成功了再将isLoaded变成false状态
this.isLoaded=false
})
.error(err=>{
//error同理
this.isLoaded=false
})
}
}
}
                            
查看完整回答
反对 回复 2019-06-09
  • 2 回答
  • 0 关注
  • 2044 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信