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


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 相关文章推荐
jquery.AutoComplete.js中文修正版(支持firefox)
Apr 09 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
模拟用户点击弹出新页面不会被浏览器拦截
Apr 08 Javascript
JS交换变量的方法
Jan 21 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
JavaScript获取服务器时间的方法详解
Dec 11 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
vue 中Virtual Dom被创建的方法
Apr 15 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
Vue 实例事件简单示例
Sep 19 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
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
探讨fckeditor在Php中的配置详解
2013/06/08 PHP
php object转数组示例
2014/01/15 PHP
js活用事件触发对象动作
2008/08/10 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
jquery对象和javascript对象即DOM对象相互转换
2014/08/07 Javascript
jQuery中parent()方法用法实例
2015/01/07 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
2015/11/17 Javascript
JS实现图片剪裁并预览效果
2016/08/12 Javascript
Angular2学习笔记之数据绑定的示例代码
2018/01/03 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
解析Vue.js中的组件
2018/02/02 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
微信小程序自定义导航栏(模板化)
2019/11/15 Javascript
如何利用javascript接收json信息并进行处理
2020/08/06 Javascript
python实现每次处理一个字符的三种方法
2014/10/09 Python
使用Python写一个小游戏
2018/04/02 Python
TensorFlow实现非线性支持向量机的实现方法
2018/04/28 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
怎么解决pycharm license Acti的方法
2020/10/28 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
BabyBjörn婴儿背带法国官网:BabyBjorn法国
2018/06/16 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
经典大学生求职信范文
2014/01/06 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
委托书怎样写
2014/08/30 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
2015小学师德工作总结
2015/07/21 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
中国梦宣传标语口号
2015/12/26 职场文书
Golang解析JSON对象
2022/04/30 Golang