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


Posted in Javascript onJanuary 13, 2017

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

实现效果图:

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

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

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

            属性   类型                           描述
enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数。

设置js里onPullDownRefresh和onReachBottom方法

属性    类型  描述
onPullDownRefresh function 页面相关事件处理函数——监听用户下拉动作
onReachBottom function 页面上拉触发底事件的处理函数

下拉加载说明:

当处理完数据刷新后,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实现微信小程序下拉

属性    类型  描述
bindscrolltoupper EventHandle 滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolower EventHandle 滚动到底部/右边,会触发 scrolltolower 事件

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;


// 请求数据
var loadMore = function(that){
  that.setData({
    hidden:false
  });
  wx.request({
    url:url,
    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");
 }
})

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 相关文章推荐
传递参数的标准方法(jQuery.ajax)
Nov 19 Javascript
如何使用Jquery获取Form表单中被选中的radio值
Aug 09 Javascript
JavaScript将字符串转换成字符编码列表的方法
Mar 19 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
js实现复选框的全选和取消全选效果
Jan 03 Javascript
JavaScript 动态三角函数实例详解
Jan 08 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
微信小程序实现全局搜索代码高亮的示例
Mar 30 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 Javascript
js实现文字向上轮播功能
Jan 13 #Javascript
jQuery实现的省市联动菜单功能示例【测试可用】
Jan 13 #Javascript
js实现交通灯效果
Jan 13 #Javascript
微信小程序 简单教程实例详解
Jan 13 #Javascript
javascript构造函数以及原型对象的理解
Jan 13 #Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 #Javascript
javascript设计模式之Adapter模式【适配器模式】实现方法示例
Jan 13 #Javascript
You might like
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
PHP基于方差和标准差计算学生成绩的稳定性示例
2017/07/04 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
PHP操作Redis常用技巧总结
2018/04/24 PHP
PHP的PDO预定义常量讲解
2019/01/24 PHP
jquery实现右键菜单插件
2015/03/29 Javascript
JS实现控制文本框的内容
2016/07/10 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
Element PageHeader页头的使用方法
2020/07/26 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
如何将python中的List转化成dictionary
2016/08/15 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
Python中django学习心得
2017/12/06 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
Python通过4种方式实现进程数据通信
2020/03/12 Python
Python特殊属性property原理及使用方法解析
2020/10/09 Python
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
解释一下Windows的消息机制
2014/01/30 面试题
生产主管岗位职责
2013/11/10 职场文书
医学院校毕业生自荐信范文
2014/01/01 职场文书
物业总经理岗位职责
2014/02/28 职场文书
公司聘任书模板
2014/03/29 职场文书
大专生求职信
2014/06/29 职场文书
教师求职自荐信范文
2015/03/04 职场文书
停水通知
2015/04/16 职场文书
反腐倡廉影片观后感
2015/06/08 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
【海涛教你打DOTA】剑圣第一人称视角解说
2022/04/01 DOTA
win11系统中dhcp服务异常什么意思? Win11 DHCP服务异常修复方法
2022/04/08 数码科技
redis lua限流算法实现示例
2022/07/15 Redis