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


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 相关文章推荐
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
JavaScript实现动态添加Form表单元素的方法示例
Aug 14 Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
Aug 25 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
详解js删除数组中的指定元素
Oct 31 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 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
PHP 文件上传全攻略
2010/04/28 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
Zend Framework数据库操作技巧总结
2017/02/18 PHP
php日志函数error_log用法实例分析
2019/09/23 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
jQuery 位置插件
2008/12/25 Javascript
jQuery 工具函数学习资料
2010/04/29 Javascript
javaScript使用EL表达式的几种方式
2014/05/27 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
2016/05/25 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
浅谈JavaScript中promise的使用
2017/01/11 Javascript
jquery mobile实现可折叠的导航按钮
2017/03/11 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
原生JS实现贪吃蛇小游戏
2020/03/09 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
Python实现堆排序的方法详解
2016/05/03 Python
Python selenium 三种等待方式解读
2016/09/15 Python
Python通过两个dataframe用for循环求笛卡尔积
2020/04/29 Python
python 实现逻辑回归
2020/12/30 Python
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
哈萨克斯坦移动和数字技术在线商店:SatelOnline.kz
2020/09/04 全球购物
小学生国旗下演讲稿
2014/04/25 职场文书
档案信息化建设方案
2014/05/16 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL