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


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 相关文章推荐
javascript 三种编解码方式
Feb 01 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
jQuery随便控制任意div隐藏的方法
Jun 28 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
jquery ajax 局部刷新小案例
Feb 08 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
JS常用正则表达式总结【经典】
May 12 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
javascript实现移动端红包雨页面
Jun 23 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
php桌面中心(三) 修改数据库
2007/03/11 PHP
php与php MySQL 之间的关系
2009/07/17 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
THINKPHP-Apache服务器中使用Alias虚拟目录URL重写 隐藏index.php
2021/03/09 PHP
读jQuery之八 包装事件对象
2011/06/21 Javascript
自己做的模拟模态对话框实现代码
2012/05/23 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
JS选项卡动态替换banner图片路径的方法
2015/05/11 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
JavaScript实现汉字转换为拼音的库文件示例
2016/12/22 Javascript
jQuery实现的网站banner图片无缝轮播效果完整实例
2019/01/28 jQuery
vue如何实现动态加载脚本
2020/02/05 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
解决vue自定义指令导致的内存泄漏问题
2020/08/04 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
[01:03:56]Mineski vs TNC 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
详细介绍Python的鸭子类型
2016/09/12 Python
python MNIST手写识别数据调用API的方法
2018/08/08 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
python中return的返回和执行实例
2019/12/24 Python
Keras官方中文文档:性能评估Metrices详解
2020/06/15 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
浅析Python迭代器的高级用法
2020/07/16 Python
感恩之星事迹材料
2014/05/03 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
2015年网络舆情工作总结
2015/07/24 职场文书
朋友离别感言
2015/08/04 职场文书
决心书格式及范文
2019/06/24 职场文书
56句经典英文座右铭
2019/08/09 职场文书
JAVA长虹键法之建造者Builder模式实现
2022/04/10 Java/Android