搜索页面scroll下拉时候进行刷新,显示更多搜索值
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下拉时候进行刷新,显示更多搜索值的更多相关文章
- easyui combogrid下拉表格的分页/按键/动态搜索
作者:xfl4629712 < easyui combogrid下拉表格的分页/按键/动态搜索 > 需求: 1.下拉框下拉时出现表格: 2.表格带分页功能: 3.可以使用向上键.向下 ...
- java简单的实现搜索框的下拉显示相关搜索功能
最近做了一个简单的搜索框下面下拉显示相关搜索的功能,有点模仿百度的下拉展示相关搜索 先上个展示图 : 点击进入演示地址,大家可以输入长点的搜索,点击搜索,再输入之前搜索词的前面部分,看是否能展示出来 ...
- Flutter 开发从 0 到 1(四)ListView 下拉加载和加载更多
在<APP 开发从 0 到 1(三)布局与 ListView>我们完成了 ListView,这篇文章将做 ListView 下拉加载和加载更多. ListView 下拉加载 Flutter ...
- Java-Selenium,获取下拉框中的每个选项的值,并随机选择某个选项
今天逛51testing,看见有人问这个问题.现在以Select标签为例. 1.首先看页面中的下拉框,如图: 2.F12查看页面源代码,如下 <select class="form-c ...
- 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果
查看本章节 查看作业目录 需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果 用户将光标移动到"最新动态页"或"帮助查询" ...
- 让下拉框中同时显示Key与Value
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
- 下拉框等需要显示上下箭头切换的CSS样式
下拉框等需要显示上下箭头切换的CSS样式 .icon-right, .icon-down, .icon-up { display: inline-block; padding-right: 13r ...
- C#---ASP页面的下拉框模糊查询功能
基础方法支持: 一. DataTable 转换成 Json 换句话说如何在ASP.NET将一个DataTable序列化为 Json数组,或者如何从一个DataTable返回一个Json字符串. 使用 ...
- 实现可搜索仿select下拉选中
由于在优化项目中,发现先前写的一个活化石级的的可搜索下拉功能在高速搜索中会出现卡顿现象 1.起初的解决方法是在搜索事件中加入防抖函数隔一段时间才去触发他,同时搜索的不再是html文档片段,而是直接对数 ...
随机推荐
- Tensorflow get_variable和Varialbe的区别
import tensorflow as tf """ tf.get_variable()和Variable有很多不同点 * 它们对重名操作的处理不同 * 它们受name ...
- 常用Raspberry Pi周边传感器的使用教程(转)
转:http://bbs.xiaomi.cn/thread-7797152-1-1.html 在Raspberry Pi 的使用和开发过程中,你可能时常需要一些硬件和传感器等来支持你的开发工作,例如, ...
- 【RS】Local Low-Rank Matrix Approximation - LLORMA :局部低秩矩阵近似
[论文标题]Local Low-Rank Matrix Approximation (icml_2013 ) [论文作者]Joonseok Lee,Seungyeon Kim,Guy Lebanon ...
- linux vi 删除一行,复制一行命令,删除所有空白行
删除所有空白行(^是行的开始,\s*是零个或者多个空白字符:$是行尾) :g/^\s*$/d 删除一行: dd 复制一行: yy ,之后是要 p 才会贴上来的.
- linux命令大全之watch命令详解(监测命令运行结果)
watch是一个非常实用的命令,基本所有的Linux发行版都带有这个小工具,如同名字一样,watch可以帮你监测一个命令的运行结果,省得你一遍遍的手动运行.在Linux下,watch是周期性的执行下个 ...
- SPI、I2C、UART三种串行总线协议的区别和SPI接口介绍(转)
SPI.I2C.UART三种串行总线协议的区别 第一个区别当然是名字: SPI(Serial Peripheral Interface:串行外设接口); I2C(INTER IC BUS) UART( ...
- 【Java】详解java对象的序列化
目录结构: contents structure [+] 序列化的含义和意义 使用对象流实现序列化 对象引用的序列化 自定义序列化 采用实现Serializable接口实现序列化 采用实现Extern ...
- linux手工释放内存
先使用sync命令以确保文件系统的完整性,sync 命令运行 sync 子例程,将所有未写的系统缓冲区写到磁盘中,包含已修改的 i-node.已延迟的块 I/O 和读写映射文件. 再执行下面任意一条命 ...
- 向量运算 与 JavaScript
二维向量都包含两个值:方向(direction)及大小(magnitude) 这两个值可以表达出各种各样的物理特性来,比如力和运动.如两个物体间的碰撞检测. 向量的大小 虽说二维向量是对大 ...
- 正则和xpath在网页中匹配字段的效率比较
1. 测试页面是 https://www.hao123.com/,这个是百度的导航 2. 为了避免网络请求带来的差异,我们把网页下载下来,命名为html,不粘贴其代码. 3.测试办法: 我们在页面中 ...