热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了微信小程序详解下拉加载与上拉刷新实现方法的相关资料,这里介绍了两种实现方法,需要的朋友可以参考下

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

实现效果图:

方法一: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



 
  
    
      
      
        {{item.name}}
        {{item.short_description}}
      
    
  
  
    
  

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 

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;
}

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!


推荐阅读
author-avatar
林林-007
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有