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


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 相关文章推荐
js中的json对象详细介绍
Oct 29 Javascript
jQuery使用before()和after()在元素前后添加内容的方法
Mar 26 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
javascript正则表达式中的replace方法详解
Apr 20 Javascript
详细介绍jQuery.outerWidth() 函数具体用法
Jul 20 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 Javascript
JavaScript实现简单的双色球(实例讲解)
Jul 31 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
关于vue 项目中浏览器跨域的配置问题
Nov 10 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缓存类代码(附详细说明)
2011/06/09 PHP
php function用法如何递归及return和echo区别
2014/03/07 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
thinkphp配置文件路径的实现方法
2016/08/30 PHP
ThinkPHP5 的简单搭建和使用详解
2018/11/15 PHP
php中数组最简单的使用方法
2020/12/27 PHP
javascript下arguments,caller,callee,call,apply示例及理解
2009/12/24 Javascript
jquery 隐藏与显示tr标签示例代码
2014/06/06 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
js简单时间比较的方法
2016/08/02 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
jQuery web 组件 后台日历价格、库存设置的代码
2016/10/14 Javascript
微信小程序动态显示项目倒计时效果
2017/06/13 Javascript
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
Python开发编码规范
2006/09/08 Python
Python模块学习 filecmp 文件比较
2012/08/27 Python
使用python实现knn算法
2017/12/20 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
python中shell执行知识点
2020/05/06 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
详解Python IO编程
2020/07/24 Python
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
SHEIN台湾:购买最新流行女装服饰
2019/05/18 全球购物
《小池塘》教学反思
2014/02/28 职场文书
开工仪式主持词
2014/03/20 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
怎样写辞职信
2015/02/27 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
中学团支部工作总结
2015/08/13 职场文书
Python 阶乘详解
2021/10/05 Python
最新最全的手机号验证正则表达式
2022/02/24 Javascript
星际争霸:毕姥爷vs解冻01
2022/04/01 星际争霸
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android