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


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 相关文章推荐
关于document.cookie的使用javascript
Apr 11 Javascript
超简单的jquery的AJAX用法
May 10 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
js的[defer]和[async]属性
Nov 24 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
Vue.js实现多条件筛选、搜索、排序及分页的表格功能
Nov 24 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 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脚本的10个技巧(6)
2006/10/09 PHP
PHP中如何判断AJAX提交的数据
2012/02/05 PHP
smarty简单分页的实现方法
2014/10/27 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
javascript一些实用技巧小结
2011/03/18 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
利用Angularjs和原生JS分别实现动态效果的输入框
2016/09/01 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
2017/07/21 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
mongodb初始化并使用node.js实现mongodb操作封装方法
2019/04/02 Javascript
使用layer.msg 时间设置不起作用的解决方法
2019/09/12 Javascript
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
python开启多个子进程并行运行的方法
2015/04/18 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python自定义线程池控制线程数量的示例
2019/02/22 Python
python 检查数据中是否有缺失值,删除缺失值的方式
2019/12/02 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
一文读懂python Scrapy爬虫框架
2021/02/24 Python
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
医药类个人求职的自我评价
2014/02/12 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
《故乡》教学反思
2014/04/10 职场文书
节能宣传周活动总结
2014/05/08 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
事业单位聘任报告
2015/03/02 职场文书
2016新年问候语大全
2015/11/11 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
golang正则之命名分组方式
2021/04/25 Golang
Pandas数据结构之Series的使用
2022/03/31 Python