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下拉时候进行刷新,显示更多搜索值的更多相关文章

  1. easyui combogrid下拉表格的分页/按键/动态搜索

    作者:xfl4629712  <  easyui combogrid下拉表格的分页/按键/动态搜索  > 需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下 ...

  2. java简单的实现搜索框的下拉显示相关搜索功能

    最近做了一个简单的搜索框下面下拉显示相关搜索的功能,有点模仿百度的下拉展示相关搜索 先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来 ...

  3. Flutter 开发从 0 到 1(四)ListView 下拉加载和加载更多

    在<APP 开发从 0 到 1(三)布局与 ListView>我们完成了 ListView,这篇文章将做 ListView 下拉加载和加载更多. ListView 下拉加载 Flutter ...

  4. Java-Selenium,获取下拉框中的每个选项的值,并随机选择某个选项

    今天逛51testing,看见有人问这个问题.现在以Select标签为例. 1.首先看页面中的下拉框,如图: 2.F12查看页面源代码,如下 <select class="form-c ...

  5. 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果

    查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...

  6. 让下拉框中同时显示Key与Value

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  7. 下拉框等需要显示上下箭头切换的CSS样式

    下拉框等需要显示上下箭头切换的CSS样式   .icon-right, .icon-down, .icon-up { display: inline-block; padding-right: 13r ...

  8. C#---ASP页面的下拉框模糊查询功能

    基础方法支持: 一. DataTable 转换成 Json 换句话说如何在ASP.NET将一个DataTable序列化为 Json数组,或者如何从一个DataTable返回一个Json字符串. 使用 ...

  9. 实现可搜索仿select下拉选中

    由于在优化项目中,发现先前写的一个活化石级的的可搜索下拉功能在高速搜索中会出现卡顿现象 1.起初的解决方法是在搜索事件中加入防抖函数隔一段时间才去触发他,同时搜索的不再是html文档片段,而是直接对数 ...

随机推荐

  1. java struts2入门学习--OGNL语言常用符号和常用标签学习

    一.OGNL常用符号(接上一篇文章): 1.#号 1)<s:property value="#request.username"/> 作用于struts2的域对象,而不 ...

  2. Apache Rewrite(大小写)

    1.Rewrite规则简介: Rewirte 主要的功能就是实现URL的跳转,它的正则表达式是基于Perl语言.可基于服务器级的(httpd.conf)和目录级的 (.htaccess)两种方式.如果 ...

  3. 原创工具binlog2sql:从MySQL binlog得到你要的SQL

    从MySQL binlog得到你要的SQL.根据不同设置,你可以得到原始SQL.回滚SQL.去除主键的INSERT SQL等. 用途 数据回滚 主从切换后数据不一致的修复 从binlog生成标准SQL ...

  4. 谈谈选用技术的原则,技术学习方法技巧,阅读代码的技巧及其它 MSF的一点心得

    谈谈技术原则,技术学习方法,代码阅读及其它(正文) 这篇文章是前一阵在水木BBS上和别人讨论中偶自己发言的摘编,是偶这几年开发过程完全经验式的总结.完全个人经验,供批判. 一.选用技术的原则 比较规范 ...

  5. vim学习笔记(一)—— vim安装方法

    一.完全卸载vim的方法 sudo apt-get remove --purge vim (--purge 是完全删除,会连配置文件一起删除) 二.Vim前言——————“世界上只有三种编辑器,EMA ...

  6. webpack window 使用sass来编译css样式

    1.执行安装: npm install sass-loader --save-dev (此处不行的话就换上npm install node-sass) 2.稍微修改一下config,删掉我们先前添加的 ...

  7. 【SqlServer】如何把本地SqlServer数据库部署到远程服务器上

    这里笔者使用的使用SqlServer2012,本机和远程环境均为Win7. 1.选中需要部署的数据库,右击>任务>分离.选中删除连接. 2.现在在左侧的表中就看不见刚才那个数据了. 3.在 ...

  8. Swift 多态

    前言 同样的操作或者方法,不同的对象在执行时会出现完全不同的行为,这就叫多态. 1.Swift 多态 多态是讲具有同样的父类的一批类之间,都重写了父类的同一个方法实现自己的行为,但是表现出来则各不相同 ...

  9. Swift 对象

    1.对象 对象是类的具体化的东西,从抽象整体中具体化出的特定个体. 对象是一个动态的概念. 每一个对象都存在着有别于其他对象的属于自己的独特属性和行为. 对象的属性可以随着他自己的行为的变化而改变. ...

  10. Oracle 12C -- clone a remote pdb

    Connect to the remote CDB and prepare the remote PDB for cloning. SQL> select con_id,dbid,name,op ...