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. 解决ubuntu13.04 有线网络 时常掉线的问题

    不少朋友在升级或新装ubuntu13.04时遇到有线老掉线的问题:连上不到半分钟又掉了,把网线重新拔插一下又可以接着又掉..基本不能正常使用或工作,很恼人的问题. 网上这方面的资料很少现在我把解决方法 ...

  2. Ubuntu系统下添加程序启动器

    Ubuntu系统上安装的软件,有的会自动创建快捷方式,在程序中可以搜索到,而有的安装后不会在应用程序中出现,如Eclipse.Spring Tool Suite或是绿色软件等,那么怎么手动创建快捷方式 ...

  3. 【LeetCode】215. Kth Largest Element in an Array (2 solutions)

    Kth Largest Element in an Array Find the kth largest element in an unsorted array. Note that it is t ...

  4. 老男孩linux实战培训初级班第二次课前考试题

    ################################################################ 本文内容摘录于老男孩linux实战运维培训中心课前考试题(答案部分) ...

  5. React(0.13) 定义一个动态的组件(函数作为动态的值)

    <!DOCTYPE html> <html> <head> <title>React JS</title> <script src=& ...

  6. 把PHP的数组变成带单引号的字符串

    上次做项目的时候,遇到 查询结果为 数组.因为条件原因,需要用$where['_string'] 去组合查询.进而用到把数组变成单引号的字符串.举例:查询返回的数组为: $projectcode_ar ...

  7. ML之回归

    一.概述 一元形式: 多元形式: 最小二乘的目标函数

  8. 在iOS开发的Quartz2D使用中实现图片剪切和截屏功能

    原文  http://www.jb51.net/article/75671.htm 图片剪切一.使用Quartz2D完成图片剪切1.把图片显示在自定义的view中先把图片绘制到view上.按照原始大小 ...

  9. Windows中"打开方式..."无法指定程序的解决办法

    Windows真DT, 今天升级了vim, 从vim73到vim74, 突然发现右键菜单打开方式中的VIM不见了, 于是手动重新指定到vim74\gvim.exe, 未果, Windows就直接忽略了 ...

  10. mysql远程访问,修改root密码

    mysql -uroot -p #input password use mysql; update user set host='%' where user='root'; flush privile ...