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


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 相关文章推荐
Prototype使用指南之selector.js
Jan 10 Javascript
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
js 文件引入实现代码
Apr 23 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
Javascript 闭包详解及实例代码
Nov 30 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
关于vue-router路径计算问题
May 10 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
vue-cli3 配置开发与测试环境详解
May 17 Javascript
vue实现select下拉显示隐藏功能
Sep 30 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
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
我的论坛源代码(八)
2006/10/09 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
thinkPHP模型初始化实例分析
2015/12/03 PHP
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
JS中的数组的sort方法使用示例
2014/01/22 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
JavaScript中用getDate()方法返回指定日期的教程
2015/06/09 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
微信小程序 获取相册照片实例详解
2016/11/16 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
在使用JSON格式处理数据时应该注意的问题小结
2017/05/20 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
Javascript执行上下文顺序的深入讲解
2020/11/04 Javascript
[09:43]DOTA2每周TOP10 精彩击杀集锦vol.5
2014/06/25 DOTA
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
Python深入学习之装饰器
2014/08/31 Python
人工智能最火编程语言 Python大战Java!
2017/11/13 Python
Python中最大递归深度值的探讨
2019/03/05 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
解决Python3.7.0 SSL低版本导致Pip无法使用问题
2020/09/03 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
Reebok官方旗舰店:美国知名健身品牌锐步
2019/01/07 全球购物
装潢设计实习自我鉴定
2013/09/19 职场文书
学生宿舍管理制度
2014/01/30 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
2015年安全生产责任书
2015/01/30 职场文书
房租涨价通知
2015/04/23 职场文书
军训后的感想
2015/08/07 职场文书