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. 使用libmagic确定文件MIME类型【示例】【转】

    原文地址:http://blog.csdn.net/vevenlcf/article/details/46122661 使用libmagic确定文件MIME类型[示例] 引用:   <http: ...

  2. VS2010 C++环境下DLL和LIB文件的生成与调试

    利用VS2010工具,调试DLL文件的方法现总结如下: 在一个解决方案中生成两个工程,假设MYDLL和MYDLG两个工程,前者是DLL工程,后者DLG调用前边的DLL工程.设置如下: 目录如下:图,本 ...

  3. 【Struts2】Struts2与Spring整合后,如何指定Action为多例模式

    Strust2默认是多例的,但是Spring默认是单例的,在进行Spring+Strust2整合的时候,就需要把Spring管理的action指定为多例模式,只需要在action上面加上@Scope( ...

  4. 【Struts2】剖析Struts2中的反射技术 ValueStack(值栈)

    1,Struts2框架主要组件的处理流程 在说ValueStack之前,笔者先说一说Struts2中常用的组件,struts2中常用组件有strutsPrepareAndExecuteExceptio ...

  5. Android Studio每日小技巧

    一般的什么快捷键,技巧的文章也有很多.我也看过很多.下面这些事我在来自国外大神发布的:Android Studio Tips of the Day查看到的,而且对于我来说有帮助的及没用过的. Andr ...

  6. mvc 文件压缩 减少文件大小

    using System; using System.Collections.Generic; using System.IO.Compression; using System.Linq; usin ...

  7. 转:ECharts图表组件之简单关系图:如何轻松实现另类站点地图且扩展节点属性实现点击节点页面跳转

    站点地图不外乎就是罗列一个网站的层次结构,提炼地讲就是一个关系结构图.那么我们如何巧用ECharts图表组件内的简单关系结构图来实现一个站点的地图结构呢?另外如何点击某个节点的时候实现页面跳转呢? 针 ...

  8. 如何利用IPv6进行远程桌面连接

    如何利用IPv6进行远程桌面连接 学校是教育网,其中寝室和实验室的IPv4地址被划分成了两个VLAN,所以没法使用windows的远程连接功能.今天突然想到学校的IPv6地址可能并未划分成两个VLAN ...

  9. sudo: /etc/sudoers is owned by uid 755, should be 0

    在ubuntu环境下, 想往/etc/sudoers中添加可以执行sudo操作的用户,使用root将/etc/sudoers的权限修改为755后,提示出现标题中的错误: 修正方法:将/etc/sudo ...

  10. MySql(十二):MySql架构设计——可扩展设计的基本原则

    一.前言 科技在发展,硬件设备的发展渐渐无法满足应用系统对处理能力的要求.不过,我们还是可以通过改造系统的架构体系,提升系统的扩展能力,通过组合多个低处理能力的硬件设备来达到一个高处理能力的系统,也就 ...