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


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 相关文章推荐
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
由ReactJS的Hello world说开来
Jul 02 Javascript
Jquery ajax基础教程
Nov 20 Javascript
BootStrap中
Dec 10 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
Angular简单验证功能示例
Dec 22 Javascript
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
Js中将Long转换成日期格式的实现方法
Jun 05 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
vue element upload组件 file-list的动态绑定实现
Oct 11 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采集时被封ip的解决方法
2010/08/29 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
thinkphp验证码显示不出来的解决方法
2014/03/29 PHP
php去除字符串中空字符的常用方法小结
2015/03/17 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
php链式操作的实现方式分析
2019/08/12 PHP
jQuery阻止冒泡和HTML默认操作
2010/11/17 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
jquery判断单选按钮radio是否选中的方法
2015/05/05 Javascript
jquery实现图片上传之前预览的方法
2015/07/11 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
使用D3.js制作图表详解
2017/08/13 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
2019/10/09 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
微信小程序实现横向滚动导航栏效果
2019/12/12 Javascript
详解Vue的组件中data选项为什么必须是函数
2020/08/17 Javascript
python通过colorama模块在控制台输出彩色文字的方法
2015/03/19 Python
Python for Informatics 第11章 正则表达式(一)
2016/04/21 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
通过python实现弹窗广告拦截过程详解
2019/07/10 Python
Python ORM编程基础示例
2020/02/02 Python
tensorflow dataset.shuffle、dataset.batch、dataset.repeat顺序区别详解
2020/06/03 Python
python excel多行合并的方法
2020/12/09 Python
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
explicit和implicit的含义
2012/11/15 面试题
财务支持类个人的自我评价
2014/02/14 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
大学生求职计划书
2014/04/30 职场文书
怎么写工作检讨书
2014/11/16 职场文书
高中体育课教学反思
2016/02/16 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL
「回转企鹅罐」10周年纪念展「輪るピングドラム展」海报公开
2022/03/22 日漫