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. oracle加密-des 简单举例.

    Declare  v_seed Raw(128);  v_key_1 Raw(64);  v_key_2 Raw(64);    v_Text_for_encrypted Raw(64);  v_mw ...

  2. Cobbler自动部署主机系统

    Cobbler自动部署主机系统 简介: Cobbler由python语言开发,是对PXE和 Kickstart以及DHCP的封装.融合很多特性,提供了CLI和Web的管理形式.更加方便的实行网络安装. ...

  3. Redis学习之路(003)- hiredis安装及测试

    一. hiredis下载地址及C API  github下载:https://github.com/redis/hiredis 安装脚本: #!/bin/zsh git clone https://g ...

  4. struts2 jsp ueditor 上传图片失败,获取不到值,解决方法

    struts2 ueditor 上传图片获取不到值 有点奇怪的是:涂鸦,网络的图片都可以.就是本地上传不行.(应该是struts2过滤了部分本地上传的信息,导致失败) 在进入到imageUp.jsp中 ...

  5. MongoDB学习笔记(2)

    MongoDB 创建数据库 语法 MongoDB 创建数据库的语法格式如下: use DATABASE_NAME 如果数据库不存在,则创建数据库,否则切换到指定数据库. 实例 以下实例我们创建了数据库 ...

  6. sqlserver 在尝试加载程序集 ID 65537 时 Microsoft .NET Framework 出错.服务器可能资源不足

    报错信息: 处理报表时出错. 对数据集“query”执行查询失败. 在尝试加载程序集 ID 65536 时 Microsoft .NET Framework 出错.服务器可能资源不足,或者不信任该程序 ...

  7. ggplot2-设置坐标轴

    本文更新地址:http://blog.csdn.net/tanzuozhev/article/details/51107583 本文在 http://www.cookbook-r.com/Graphs ...

  8. Maven for Eclipse 第一章 ——Maven的介绍

    最近深陷与一个无比垃圾的项目无法自拔,好久没有更新文章了.今天简单介绍一下 Maven 在 Eclipse 中的使用.文章的内容几乎出于<Maven for Eclipse>一书,此书言简 ...

  9. LINQ中in的实现方法-LINQ To Entities如何实现查询 select * from tableA where id in (1,2,3,4)

    如果用in是字符串类型无问题,可以直接这样用 ).Where(entity => urls.Contains((entity.NavigateUrl == null ? "" ...

  10. mysql-8.0.11 比较坑的地方dba门要淡定

    [事件描述] 突然之间大量的连接进入数据库.并放开手干,这个使得mysql使用了大量的内存,触发了linux的oom机制.然后mysql就这样 被linux给干掉了.没错MySQL宕机了,要相信我说的 ...