搜索页面scroll下拉时候进行刷新,显示更多搜索值
1.封装扩展scroll.vue功能;
1 //props传值
pullup:{ 2 type:Boolean, 3 default:false 4 } 5 6 7 _initScroll(){ 8 if(!this.$refs.wrapper){ 9 return 10 } 11 this.scroll = new BScroll(this.$refs.wrapper,{ 12 probeType: this.probeType, 13 click: this.click 14 }) 15 if(this.listenScroll){//初始化时候判断是否监听滚动 16 let _this=this 17 this.scroll.on('scroll',(pos)=>{ 18 _this.$emit('scroll',pos) 19 }) 20 } 21 if(this.pullup){//滚动到底部的时候进行事件监听,刷新搜索列表//这里只是派发事件; 22 this.scroll.on('scrollEnd',()=>{ 23 if(this.scroll.y <=(this.scroll.maxScrollY + 50)){ 24 this.$emit('scrollToEnd') 25 } 26 }) 27 } 28 },
2.在suggest中传值:
1 <scroll 2 :pullup="pullup" 3 @scrollToEnd = 'searchMore' 4 >
3.searchMore方法:
a.data声明一个标识位hasMore:true;
b.当发送search()请求,请求后端数据的时候hasMore值为true,
c.封装_checkMore()方法,当已经显示条数大于总条数的时候将hasMore:false;
d.每次search()请求的最后调用_checkMore方法确定hasMore的值;
e.当hasMore:true的时候发送再次触发searchMore事件
1 _checkMore(data){ 2 const song = data.song 3 if(!song.list.length || (song.curnum + song.curPage*perPage)>song.totalnum){//页码数*每页数量大于总条数 4 this.hasMore = false 5 } 6 }, 7 searchMore(){ 8 if( !this.hasMore){ 9 return 10 } 11 this.page++ 12 search(this.query,this.page,this.showSinger,perpage).then((res) =>{ 13 if (res.code === ERR_OK) { 14 this.result = this.result.concat(this._genResult(res.data)) 15 this._checkMore(res.data) 16 } 17 }) 18 },
一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱;