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


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 相关文章推荐
json 定义
Jun 10 Javascript
解析Javascript中难以理解的11个问题
Dec 09 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
jQuery实现TAB选项卡切换特效简单演示
Mar 04 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
js 实现ajax发送步骤过程详解
Jul 25 Javascript
vue-cli 为项目设置别名的方法
Oct 15 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 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并发访问实例代码
2012/09/06 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
prototype 中文参数乱码解决方案
2009/11/09 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
Javascript之Number对象介绍
2016/06/07 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
JavaScript 中有关数组对象的方法(详解)
2016/08/15 Javascript
前端必备插件之纯原生JS的瀑布流插件Macy.js
2017/11/22 Javascript
使用nodejs+express实现简单的文件上传功能
2017/12/27 NodeJs
基于jQuery实现无缝轮播与左右点击效果
2018/05/13 jQuery
Vue表单输入绑定的示例代码
2018/11/01 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
在Express中提供静态文件的实现方法
2019/10/17 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
Python作用域与名字空间原理详解
2020/03/21 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
Python多线程thread及模块使用实例
2020/04/28 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
html2canvas生成清晰的图片实现打印的示例代码
2019/09/30 HTML / CSS
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
.NET笔试题(20个问题)
2016/02/02 面试题
维德科技C#面试题笔试题
2015/12/09 面试题
安全检查管理制度
2014/02/02 职场文书
棉花姑娘教学反思
2014/02/15 职场文书
党支部换届选举方案
2014/05/08 职场文书
实习指导教师评语
2014/12/30 职场文书
安全生产警示教育活动总结
2015/05/09 职场文书
投诉书格式范本
2015/07/02 职场文书
血轮眼轮回眼特效 html+css
2021/03/31 HTML / CSS
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android