搜索页面scroll下拉时候进行刷新,显示更多搜索值
1.封装扩展scroll.vue功能;
1 //props传值 pullup:{ 2 type:Boolean, 3 default:false 4 } 5 6 7 _initScroll(){ 8 if(!this.$refs.wrapper){ 9 return 10 } 11 this.scroll = new BScroll(this.$refs.wrapper,{ 12 probeType: this.probeType, 13 click: this.click 14 }) 15 if(this.listenScroll){//初始化时候判断是否监听滚动 16 let _this=this 17 this.scroll.on('scroll',(pos)=>{ 18 _this.$emit('scroll',pos) 19 }) 20 } 21 if(this.pullup){//滚动到底部的时候进行事件监听,刷新搜索列表//这里只是派发事件; 22 this.scroll.on('scrollEnd',()=>{ 23 if(this.scroll.y <=(this.scroll.maxScrollY + 50)){ 24 this.$emit('scrollToEnd') 25 } 26 }) 27 } 28 },
2.在suggest中传值:
1 <scroll 2 :pullup="pullup" 3 @scrollToEnd = 'searchMore' 4 >
3.searchMore方法:
a.data声明一个标识位hasMore:true;
b.当发送search()请求,请求后端数据的时候hasMore值为true,
c.封装_checkMore()方法,当已经显示条数大于总条数的时候将hasMore:false;
d.每次search()请求的最后调用_checkMore方法确定hasMore的值;
e.当hasMore:true的时候发送再次触发searchMore事件
1 _checkMore(data){ 2 const song = data.song 3 if(!song.list.length || (song.curnum + song.curPage*perPage)>song.totalnum){//页码数*每页数量大于总条数 4 this.hasMore = false 5 } 6 }, 7 searchMore(){ 8 if( !this.hasMore){ 9 return 10 } 11 this.page++ 12 search(this.query,this.page,this.showSinger,perpage).then((res) =>{ 13 if (res.code === ERR_OK) { 14 this.result = this.result.concat(this._genResult(res.data)) 15 this._checkMore(res.data) 16 } 17 }) 18 },
搜索页面scroll下拉时候进行刷新,显示更多搜索值相关推荐
- 微信小程序页面事件 - 下拉刷新与上拉触底
一.下拉刷新 1.概念:下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为. 2. 启用下拉刷新 启用下拉刷新有两种方式: ①全局开启下拉刷新 在 app.j ...
- 小程序中scroll-view的下拉刷新和小程序页面的下拉刷新开启方法
scroll-view的下拉刷新 video.wxml中 <scroll-view class="videoScroll" scroll-y="true" ...
- jquery ajax下拉联动,基于jQuery Ajax实现下拉框无刷新联动
本文实例为大家分享了jQuery Ajax实现下拉框无刷新联动的具体代码,供大家参考,具体内容如下 HTML代码: @{ Layout = null; } @using DAL; @using Sys ...
- listview 刷新结束 监听_Flutter 开发从 0 到 1(四)ListView 下拉加载和加载更多
在<APP 开发从 0 到 1(三)布局与 ListView>我们完成了 ListView,这篇文章将做 ListView 下拉加载和加载更多. ListView 下拉加载 Flutter ...
- uniapp 微信小程序分页方法:uni-pagination分页插件和上拉分页、下拉加载刷新、刷新后回到顶部
1.uni-pagination分页插件 先去uniapp插件市场安装分页插件: uni-app官网https://uniapp.dcloud.io/component/uniui/uni-pagin ...
- php可输入的下拉框,jQuery实现可输入搜索文字的下拉框实例代码
利用jQuery实现可输入搜索文字的下拉框 先看效果 功能:点击下拉框输入框时,自动显示下面的下拉列表,而且是根据输入框中输入的搜索添加,自动在后台查找,然后传到前台,展现页面. 用的的js: var ...
- html搜索框如何加下拉框,js实现带搜索功能的下拉框
本文实例为大家分享了js实现带搜索功能的下拉框,供大家参考,具体内容如下 1.介绍 在实现下拉框的时候,如果用select+option可以在满足pc端的需求,但如果需应用到手机端,由于select的 ...
- 免费资源下载:暗色色系的超棒搜索框和下拉菜单UI欣赏
为什么80%的码农都做不了架构师?>>> 日期:2012-7-5 来源:GBin1.com 在今天的免费素材下载中,我们推荐来自法国的UI设计师Alexandra Nuad的 ...
- 谈360下拉词360下拉框的优势及360搜索推广方法有哪些?
今天昔年来聊聊关于360下拉词360下拉框的优势以及360搜索推广方式有哪些?另外文章结尾附上其他几个搜索引擎及平台的下拉词框优化推广方法及优势干货. 先来说说360下拉词框的优势有哪些? 一.用户量 ...
最新文章
- ROS之自定义msg
- div块内的CSS中心文本(水平和垂直)
- C++与Java多态的区别
- java clock计时_Java Clock类| systemUTC()方法与示例
- ES6——let、参数增强、箭头函数、模板字符串、for of和解构
- kubenetes 1.4 安装后8080端口无法访问
- 5016.网络安全__防火墙应用案例和双机HA部署案例
- Linux基础培训笔记二
- python以追加方式打开文件 线程安全吗_Python多线程同步---文件读写控制方法
- C语言算法-求两直线夹角计算公式
- 云计算机根据部署,华为云计算FusionCompute环境部署实验之使用批量部署工具安装...
- 【MFC】Ribbon界面开发(三)
- Qt小项目(二):调色器
- 小红书销售情况(EDA/RFM)
- Android QQ 登录接入详细介绍
- 记一次作业:完成企业网络安全运营建设方案
- Python灰帽子笔记一
- 组合查询条件的合理应用
- 嵌入式系统原理与应用技术(第2版) 【期末复习】:随堂习题2
- [软件评测] MLDonkey研究 – 调教Mac平台最快的驴