zoukankan      html  css  js  c++  java
  • 搜索页面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         },
  • 相关阅读:
    原型链与析构函数
    django篇-路由系统介绍
    mvc与mtv
    模板初探
    安装和创建django项目
    一分钟学会定时删除日志的 Shell 脚本
    svn其中一种备份方式svnsync
    mysql企业实战(二)之主从复制,读写分离,双主,以及高可用
    mysql企业实战(一)
    nginx详解
  • 原文地址:https://www.cnblogs.com/yangguoe/p/9473043.html
Copyright © 2011-2022 走看看