详解微信小程序开发之下拉刷新 上拉加载


Posted in Javascript onNovember 24, 2016

微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善.

上gif:详解微信小程序开发之下拉刷新 上拉加载
原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法.

1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字.

2.上拉加载,在滑动到底部时,bindscrolltolower被调用,我这里是页数加一,根据自己的业务逻辑修改,然后将获取到的集合添加到scroll-view的数据集合里即可.详解微信小程序开发之下拉刷新 上拉加载

上代码:

1.index.js

//index.js 
//获取应用实例 
var app = getApp() 
Page({ 
 data: { 
 words: [], 
 windowHeight: 0,//获取屏幕高度 
 refreshHeight: 0,//获取高度 
 refreshing: false,//是否在刷新中 
 refreshAnimation: {}, //加载更多旋转动画数据 
 clientY: 0,//触摸时Y轴坐标 
 }, 
 onLoad: function () { 
 var _this = this; 
 //获取屏幕高度 
 wxgetSystemInfo({ 
  success: function (res) { 
  _thissetData({ 
   windowHeight: reswindowHeight 
  }) 
  consolelog("屏幕高度: " + reswindowHeight) 
  } 
 }) 
 //获取words 
 wxrequest({ 
  url: 'http://apiavatardatacn/ChengYu/Search?key=77f072d28eb141c8b6dda145ca364b92&keyWord=好', 
  complete: function (res) { 
  if (resdatareason == 'Succes') { 
   _thissetData({ 
   words: resdataresult 
   }) 
  } 
  } 
 }) 
 }, 
 scroll: function () { 
 consolelog("滑动了") 
 }, 
 lower: function () { 
 var start = 0; 
 start += 1; 
 consolelog("加载了") 
 var _this = this; 
 wxrequest({ 
  url: 'http://apiavatardatacn/ChengYu/Search', 
  data: { 
  key: '77f072d28eb141c8b6dda145ca364b92', keyWord: '好', page: start 
  }, 
  complete: function (res) { 
  if (resdatareason == 'Succes') { 
   var words = _thisdatawordsconcat(resdataresult); 
   _thissetData({ 
   words: words 
   }) 
  } 
  } 
 }) 
 }, 
 upper: function () { 
 consolelog("下拉了") 
 //获取用户Y轴下拉的位移 
 
 if (thisdatarefreshing) return; 
 thissetData({ refreshing: true }); 
 updateRefreshIconcall(this); 
 var _this = this; 
 var i = Mathrandom() //获得0-1的随机数 
 i = Mathceil(i * 10) //乘以10并向上去整 
 var words = ['龙', '一', '万', '千', '浩', '金', '得', '而', '可', '人']; 
 var word = words[i]; 
 wxrequest({ 
  url: 'http://apiavatardatacn/ChengYu/Search?key=77f072d28eb141c8b6dda145ca364b92&keyWord=' + word, 
 
  complete: function (res) { 
  if (resdatareason == 'Succes') { 
   setTimeout(function () { 
   _thissetData({ 
    words: resdataresult 
   }) 
   }, 2000) 
  } 
  setTimeout(function () { 
   _thissetData({ 
   refreshing: false 
   }) 
  }, 2500) 
  } 
 }) 
 }, 
 start: function (e) { 
 var startPoint = etouches[0] 
 var clientY = startPointclientY; 
 thissetData({ 
  clientY: clientY, 
  refreshHeight: 0 
 }) 
 }, 
 end: function (e) { 
 var endPoint = echangedTouches[0] 
 var y = (endPointclientY - thisdataclientY) * 6; 
 if (y > 50) { 
  y = 50; 
 } 
 thissetData({ 
  refreshHeight: y 
 }) 
 }, 
 move: function (e) { 
 consolelog("下拉滑动了") 
 } 
}) 
 
/** 
 * 旋转上拉加载图标 
 */ 
function updateRefreshIcon() { 
 var deg = 0; 
 var _this = this; 
 consolelog('旋转开始了') 
 var animation = wxcreateAnimation({ 
 duration: 1000 
 }); 
 
 var timer = setInterval(function () { 
 if (!_thisdatarefreshing) 
  clearInterval(timer); 
 animationrotateZ(deg)step();//在Z轴旋转一个deg角度 
 deg += 360; 
 _thissetData({ 
  refreshAnimation: animationexport() 
 }) 
 }, 1000); 
}

2.index.wxml

<!--indexwxml--> 
 <view class="refresh-block" style="height: {{refreshHeight}}px;" wx:if="{{refreshing}}"> 
 <image animation="{{refreshAnimation}}" src="/images/refreshpng"></image> 
 </view> 
<scroll-view scroll-y="true" style="height: {{windowHeight}}px;" bindscroll="scroll" bindscrolltolower="lower" bindscrolltoupper="upper" 
catchtouchmove="move" catchtouchstart="start" catchtouchend="end" 
> 
<block wx:for="{{words}}"> 
  <view class="item-style">{{itemname}}</view> 
</block> 
</scroll-view>

3.index.wxss

/**indexwxss**/ 
item-style{ 
 padding: 30rpx; 
 font-size: 40rpx; 
 text-align: center; 
 border-top: 2rpx solid #eee; 
} 
refresh-block { 
 padding: 15px; 
 text-align: center 
} 
refresh-block image { 
 width: 30px; 
 height: 30px; 
}

demo:下载地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
正则表达式语法
Oct 09 Javascript
jquery获取ASP.NET服务器端控件dropdownlist和radiobuttonlist生成客户端HTML标签后的value和text值
Jun 28 Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
基于JavaScript实现鼠标向下滑动加载div的代码
Aug 31 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
js的三种继承方式详解
Jan 21 Javascript
JavaScript实现无刷新上传预览图片功能
Aug 02 Javascript
vue.js响应式原理解析与实现
Jun 22 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
理理Vue细节(推荐)
Apr 16 Javascript
微信小程序-消息提示框实例
Nov 24 #Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 #Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 #Javascript
javascript实现获取图片大小及图片等比缩放的方法
Nov 24 #Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
Nov 24 #Javascript
Javascript 数组去重的方法(四种)详解及实例代码
Nov 24 #Javascript
BootStrap树状图显示功能
Nov 24 #Javascript
You might like
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
PHP调用wsdl文件类型的接口代码分享
2014/11/19 PHP
PHP中array_slice函数用法实例详解
2014/11/25 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
php实现的简单检验登陆类
2015/06/18 PHP
php生成动态验证码gif图片
2015/10/19 PHP
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
window.parent与window.openner区别介绍
2012/04/12 Javascript
Javascript实现页面跳转的几种方式分享
2013/10/26 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
2016/02/02 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
Vue简单实现原理详解
2020/05/07 Javascript
Python 文件操作实现代码
2009/10/07 Python
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
python实现网站的模拟登录
2016/01/04 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
python一键去抖音视频水印工具
2018/09/14 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
Python实现网站表单提交和模板
2019/01/15 Python
pyqt5与matplotlib的完美结合实例
2019/06/21 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
Python命令行参数argv和argparse该如何使用
2021/02/08 Python
详解解决jupyter不能使用pytorch的问题
2021/02/18 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
Html5 web本地存储实例详解
2016/07/28 HTML / CSS
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
通信工程专业毕业生推荐信
2013/12/25 职场文书
写自荐信要注意什么
2013/12/26 职场文书
宣传活动总结范文
2014/07/01 职场文书
机械生产实习心得体会
2016/01/22 职场文书
Elasticsearch 批量操作
2022/04/19 Python