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


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 相关文章推荐
javascript基本语法分析说明
Jun 15 Javascript
载入jQuery库的最佳方法详细说明及实现代码
Dec 28 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
javascript计时器事件使用详解
Jan 07 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
AngularJS入门教程之服务(Service)
Jul 27 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
轻量级JS Cookie插件js-cookie的使用方法
Mar 22 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
Sep 18 Javascript
vue 实现cli3.0中使用proxy进行代理转发
Oct 30 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调用数据库的存贮过程!
2006/10/09 PHP
PHP获取163、gmail、126等邮箱联系人地址【已测试2009.10.10】
2009/10/11 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
JavaScript arguments 多参传值函数
2010/10/24 Javascript
用XMLDOM和ADODB.Stream实现base64编码解码实现代码
2010/11/28 Javascript
jQuery实现图片信息的浮动显示实例代码
2013/08/28 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
jquery实现很酷的网页顶部图标下拉菜单效果
2015/08/22 Javascript
全国省市二级联动下拉菜单 js版
2016/05/10 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
2016/12/26 Javascript
JavaScript数据结构学习之数组、栈与队列
2017/05/02 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
JS实现json对象数组按对象属性排序操作示例
2018/05/18 Javascript
vue移动端下拉刷新和上拉加载的实现代码
2018/09/08 Javascript
详解vue文件中使用echarts.js的两种方式
2018/10/18 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
对django views中 request, response的常用操作详解
2019/07/17 Python
Python中调用其他程序的方式详解
2019/08/06 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
Java中compareTo和compare的区别
2016/04/12 面试题
经典的毕业生自荐信范文
2014/04/14 职场文书
党的生日活动方案
2014/08/15 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
付款证明模板
2015/06/19 职场文书
女儿满月酒致辞
2015/07/29 职场文书
大学生饮品店创业计划书范文
2019/07/10 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
Mysql Show Profile
2021/04/05 MySQL