微信小程序下拉加载和上拉刷新两种实现方法详解


Posted in Javascript onSeptember 05, 2019

方法一:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新

首先要在json文件里设置window属性

设置js里onPullDownRefresh和onReachBottom方法

下拉加载说明:

当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

onPullDownRefresh(){
console.log('--------下拉刷新-------')

wx.showNavigationBarLoading() //在标题栏中显示加载

wx.request({
     url: 'https://URL',
     data: {},
     method: 'GET',
     // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
     // header: {}, // 设置请求的 header
     success: function(res){
      // success
     },
     fail: function() {
      // fail
     },
     complete: function() {
      // complete
      wx.hideNavigationBarLoading() //完成停止加载
      wx.stopPullDownRefresh() //停止下拉刷新
   }
})

方法二:在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序下拉

index.wxml

<!--index.wxml-->
 <view class="container" style="padding:0rpx">
  <!--垂直滚动,这里必须设置高度-->
   <scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;"
     class="list" bindscrolltolower="bindDownLoad" bindscrolltoupper="topLoad" bindscroll="scroll">
     <view class="item" wx:for="{{list}}">
       <image class="img" src="{{item.pic_url}}"></image>
       <view class="text">
         <text class="title">{{item.name}}</text>
         <text class="description">{{item.short_description}}</text>
       </view>
     </view>
   </scroll-view>
   <view class="body-view">
     <loading hidden="{{hidden}}" bindchange="loadingChange">
       加载中...
     </loading>
   </view>
 </view>

index.js

var url = "http://www.imooc.com/course/ajaxlist";
var page =0;
var page_size = 5;
var sort = "last";
var is_easy = 0;
var lange_id = 0;
var pos_id = 0;
var unlearn = 0;
 // 请求数据<br> var loadMore = function(that){
  that.setData({
    hidden:false
  });
  wx.request({
    url:url,<br>    data:{
      page : page,
      page_size : page_size,
      sort : sort,
      is_easy : is_easy,
      lange_id : lange_id,
      pos_id : pos_id,
      unlearn : unlearn
    },
    success:function(res){
      //console.info(that.data.list);
      var list = that.data.list;
      for(var i = 0; i < res.data.list.length; i++){
        list.push(res.data.list[i]);
      }
      that.setData({
        list : list
      });
      page ++;
      that.setData({
        hidden:true
      });
    }
  });
}
Page({
 data:{
  hidden:true,
  list:[],
  scrollTop : 0,
  scrollHeight:0
 },
 onLoad:function(){
  //  这里要注意,微信的scroll-view必须要设置高度才能监听滚动事件,所以,需要在页面的onLoad事件中给scroll-view的高度赋值
   var that = this;
   wx.getSystemInfo({
     success:function(res){
       that.setData({
         scrollHeight:res.windowHeight
       });
     }
   });
    loadMore(that);
 },
 //页面滑动到底部
 bindDownLoad:function(){ 
   var that = this;
   loadMore(that);
   console.log("lower");
 },
 scroll:function(event){
  //该方法绑定了页面滚动时的事件,我这里记录了当前的position.y的值,为了请求数据之后把页面定位到这里来。
   this.setData({
     scrollTop : event.detail.scrollTop
   });
 },
 topLoad:function(event){
  //  该方法绑定了页面滑动到顶部的事件,然后做上拉刷新
   page = 0;
   this.setData({
     list : [],
     scrollTop : 0
   });
   loadMore(this);
   console.log("lower");
 }<br> })

index.wxss

/**index.wxss**/
 
 .userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
 }
 
 .userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
 }
 
 .userinfo-nickname {
  color: #aaa;
}
 
 .usermotto {
  margin-top: 200px;
 }
 
 /**/
 
 scroll-view {
  width: 100%;
 }
 
 .item {
  width: 90%;
  height: 300rpx;
  margin: 20rpx auto;
  background: brown;
  overflow: hidden;
 }
 
 .item .img {
  width: 430rpx;
  margin-right: 20rpx;
  float: left;
 }
 
 .title {
  font-size: 30rpx;
  display: block;
  margin: 30rpx auto;
 }
 
 .description {
 font-size: 26rpx;
  line-height: 15rpx;
}

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

Javascript 相关文章推荐
解决 firefox 不支持 document.all的方法
Mar 12 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
JavaScript插件化开发教程 (一)
Jan 27 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
jQuery中each方法的使用详解
Mar 18 jQuery
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 jQuery
layui动态加载多表头的实例
Sep 05 #Javascript
如何阻止小程序遮罩层下方图层滚动
Sep 05 #Javascript
layui多iframe页面控制定时器运行的方法
Sep 05 #Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 #Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 #Javascript
layer实现弹出层自动调节位置
Sep 05 #Javascript
vue使用i18n实现国际化的方法详解
Sep 05 #Javascript
You might like
用定制的PHP应用程序来获取Web服务器的状态信息
2006/10/09 PHP
phpinfo 系统查看参数函数代码
2009/06/05 PHP
PHP调用MsSQL Server 2012存储过程获取多结果集(包含output参数)的详解
2013/07/03 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
浅谈PHP中的数据传输CURL
2016/09/06 PHP
php的PDO事务处理机制实例分析
2017/02/16 PHP
js返回上一页并刷新的多种实现方法
2014/02/26 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
jQuery结合CSS制作动态的下拉菜单
2015/10/27 Javascript
微信小程序 保留小数(toFixed)详细介绍
2016/11/16 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
新手快速入门JavaScript装饰者模式与AOP
2019/06/24 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
开源Web应用框架Django图文教程
2017/03/09 Python
python executemany的使用及注意事项
2017/03/13 Python
Python(TensorFlow框架)实现手写数字识别系统的方法
2018/05/29 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
Python3.4 tkinter,PIL图片转换
2018/06/21 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
python selenium xpath定位操作
2020/09/01 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
Roxy荷兰官方网站:冲浪、滑雪板、服装和配件
2019/10/22 全球购物
应届护士求职信范文
2014/01/26 职场文书
实习生求职自荐信
2014/02/07 职场文书
授权收款委托书范本
2014/10/10 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
幼儿园教师培训心得体会
2016/01/21 职场文书
使用javascript解析二维码的三种方式
2021/11/11 Javascript