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


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 函数使用说明
Apr 07 Javascript
JS禁用浏览器退格键实现思路及代码
Oct 29 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
Jan 09 Javascript
JS父页面与子页面相互传值方法
Mar 05 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
BootStrap网页中代码显示用法详解
Oct 21 Javascript
Bootstrap CSS组件之导航(nav)
Dec 17 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
React Native中Navigator的使用方法示例
Oct 13 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
vue服务端渲染操作简单入门实例分析
Aug 28 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
BBS(php &amp; mysql)完整版(四)
2006/10/09 PHP
PHP提取中文首字母
2008/04/09 PHP
php中批量删除Mysql中相同前缀的数据表的代码
2011/07/01 PHP
PHP不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
PHP根据传入参数合并多个JS和CSS文件的简单实现
2014/06/13 PHP
微信红包随机生成算法php版
2016/07/21 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
学习jquery必备 api中英文对照的chm手册 下载
2007/05/03 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
2020/04/04 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
使用Angular CLI快速创建Angular项目的一些基本概念和写法小结
2018/04/22 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
js canvas实现星空连线背景特效
2019/11/01 Javascript
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
pandas系列之DataFrame 行列数据筛选实例
2018/04/12 Python
python 计算方位角实例(根据两点的坐标计算)
2020/01/17 Python
TensorFlow学习之分布式的TensorFlow运行环境
2020/02/05 Python
django使用F方法更新一个对象多个对象字段的实现
2020/03/28 Python
Python偏函数Partial function使用方法实例详解
2020/06/17 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
创业计划书如何编写
2014/02/06 职场文书
秋季运动会广播稿
2014/02/22 职场文书
医院护士见习期自我鉴定
2014/09/15 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
团日活动总结格式
2015/05/11 职场文书
告诉你一个秘密:富人致富的五大优点
2019/07/11 职场文书
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis