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


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 DIV弹出效果实现代码
Jul 03 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
js制作简易年历完整实例
Jan 28 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
详解js实现线段交点的三种算法
Aug 09 Javascript
AngularJs  E2E Testing 详解
Sep 02 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
Vue分页组件实例代码
Apr 17 Javascript
基于vue实现swipe分页组件实例
May 25 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
PHP 组件化编程技巧
2009/06/06 PHP
PHP mcrypt可逆加密算法分析
2011/07/19 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
PHP中执行MYSQL事务解决数据写入不完整等情况
2014/01/07 PHP
PHP实现一维数组转二维数组的方法
2015/02/25 PHP
PHP解析RSS的方法
2015/03/05 PHP
PHP连接数据库实现注册页面的增删改查操作
2016/03/27 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
JavaScript toFixed() 方法
2010/04/15 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
详解Js模板引擎(TrimPath)
2016/11/22 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
关于vue中 $emit的用法详解
2018/04/12 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
Angular8路由守卫原理和使用方法
2019/08/29 Javascript
如何检测JavaScript中的死循环示例详解
2020/08/30 Javascript
[01:09]2014DOTA2国际邀请赛 TI4西雅图DOTA2 中国美女coser加油助威
2014/07/20 DOTA
零基础写python爬虫之爬虫的定义及URL构成
2014/11/04 Python
简单谈谈Python流程控制语句
2016/12/04 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
python实现经典排序算法的示例代码
2021/02/07 Python
香港艺人陈冠希创办的潮流品牌:JUICESTORE
2021/03/04 全球购物
销售人才自我评价范文
2014/09/27 职场文书
学生逃课检讨书1000字
2014/10/20 职场文书
2014-2015学年工作总结
2014/11/27 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
培训师岗位职责
2015/02/14 职场文书
亲戚关系证明
2015/06/24 职场文书
会计专业自荐信范文
2019/05/22 职场文书
基于Redis位图实现用户签到功能
2021/05/08 Redis