搜索页面scroll下拉时候进行刷新，显示更多搜索值

1.封装扩展scroll.vue功能；

    //props传值

        pullup:{

           type:Boolean,

           default:false

         }

      _initScroll(){

           if(!this.$refs.wrapper){

             return

           }

           this.scroll = new BScroll(this.$refs.wrapper,{

             probeType: this.probeType,

             click: this.click

           })

           if(this.listenScroll){//初始化时候判断是否监听滚动

             let _this=this

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

               _this.$emit('scroll',pos)

             })

           }

           if(this.pullup){//滚动到底部的时候进行事件监听，刷新搜索列表//这里只是派发事件；

             this.scroll.on('scrollEnd',()=>{

               if(this.scroll.y <=(this.scroll.maxScrollY + 50)){

                 this.$emit('scrollToEnd')

               }

             })

           }

         },

2.在suggest中传值：

   <scroll

     :pullup="pullup"

     @scrollToEnd = 'searchMore'

   >

3.searchMore方法：

a.data声明一个标识位hasMore:true;

b.当发送search（）请求，请求后端数据的时候hasMore值为true,

c.封装_checkMore()方法，当已经显示条数大于总条数的时候将hasMore:false;

d.每次search()请求的最后调用_checkMore方法确定hasMore的值；

e.当hasMore：true的时候发送再次触发searchMore事件

      _checkMore(data){

           const song = data.song

           if(!song.list.length || (song.curnum + song.curPage*perPage)>song.totalnum){//页码数*每页数量大于总条数

              this.hasMore = false

           }

         },

         searchMore(){

           if( !this.hasMore){

             return

           }

           this.page++

           search(this.query,this.page,this.showSinger,perpage).then((res) =>{

             if (res.code === ERR_OK) {

               this.result = this.result.concat(this._genResult(res.data))

               this._checkMore(res.data)

             }

           })

         },

巴特西

搜索页面scroll下拉时候进行刷新，显示更多搜索值

最新文章

热门文章