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


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 相关文章推荐
js null undefined 空区别说明
Jun 13 Javascript
跨域请求之jQuery的ajax jsonp的使用解惑
Oct 09 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
利用webqq协议使用python登录qq发消息源码参考
Apr 08 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
JS中Json数据的处理和解析JSON数据的方法详解
Jun 29 Javascript
轻松掌握JavaScript中介者模式
Aug 26 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
vue-router路由与页面间导航实例解析
Nov 07 Javascript
js设计模式之代理模式及订阅发布模式实例详解
Aug 15 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 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
extjs 为某个事件设置拦截器
2010/01/15 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
jquery+ajax实现省市区三级联动 (封装和不封装两种方式)
2017/05/15 jQuery
JS兼容所有浏览器的DOMContentLoaded事件
2018/01/12 Javascript
koa源码中promise的解读
2018/11/13 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
vue动态渲染svg、添加点击事件的实现
2020/03/13 Javascript
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
Django model序列化为json的方法示例
2018/10/16 Python
Python+PyQT5的子线程更新UI界面的实例
2019/06/14 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
OpenCV 边缘检测
2019/07/10 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
pytorch查看模型weight与grad方式
2020/06/24 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
C#和SQL Server的面试题
2016/08/12 面试题
离职证明范本(5篇)
2014/09/19 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
新生入学欢迎词
2015/01/26 职场文书
幼儿园端午节活动总结
2015/05/05 职场文书
房贷收入证明范本
2015/06/12 职场文书
篮球赛新闻稿
2015/07/17 职场文书
公司保洁员管理制度
2015/08/04 职场文书
2016年学校综治宣传月活动总结
2016/03/16 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
导游词之山东八大关
2019/12/18 职场文书
如何在Python中创建二叉树
2021/03/30 Python
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers
安装Ruby和 Rails的详细步骤
2022/04/19 Ruby