微信小程序—两种方式实现上拉加载与下拉刷新

最新推荐文章于 2024-07-31 17:44:02 发布
最新推荐文章于 2024-07-31 17:44:02 发布
阅读量3.4k 收藏 3
点赞数 1
分类专栏： 微信小程序 文章标签： 微信 小程序 上拉加载 下拉刷新 分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Afanbaby/article/details/78835694
版权

在列表数据的时候，一般都会有分页，因为如果一次性都加载出来的话，会造成卡顿的现象，浪费用户的流量，所以就会有下拉刷新，上拉加载。这里我们介绍两种实现微信小程序的下拉刷新，上拉加载的实现方式：

一、第一种实现方式：

1.官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=20161107

通过scroll-view（可滚动视图区域）的属性来实现的，bindscrolltoupper（滚动到顶部/左边，会触发 scrolltoupper 事件），bindscrolltolower（滚动到底部/右边，会触发 scrolltolower 事件），bindscroll（）滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

2.效果图如下，

这里写图片描述

3.index.js中：


//index.js
//获取应用实例
const app = getApp();
const parentUrl = "http://apicloud.mob.com/v1/cook/menu/search?name=%E7%BA%A2%E7%83%A7%E8%82%89&cid=0010001007&key=17113fceca309&size=20&page=";
var curPage = 0;
var ctgTitles;
var thumbnail;
var isRefresh = true;
Page({
  data: {
    refresh_h: false,//刷新
    load_h: true,//加载
    line_h: true,//底线
    scrollTop: 0,
  },

  onLoad: function () {
    //微信的scroll-view必须要设置高度才能监听滚动事件，所以，需要在页面的onLoad事件中给scroll-view的高度赋值
    var that = this;
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          windowHeight: res.windowHeight,
          windowWidth: res.windowWidth
        })
      }
    })
    //设置第一次数据
    GetList(that);
  },

  //页面滑动到顶部(下拉刷新)
  topLoad: function (e) {
    isRefresh = true;
    curPage = 0;
    var that = this;
    that.setData({
      list: [],
      scrollTop: 0
    })
    GetList(that)
  },
  //页面滑动到底部(上拉加载)
  downLoad: function (e) {
    var that = this;
    isRefresh = false;
    GetList(that)
  },
  //设置竖向滚动条位置
  scroll: function (event) {
    this.setData({
      scrollTop: event.detail.scrollTop
    });
    console.log(event.detail.scrollTop);
  },
})


var GetList = function (that) {
  if (isRefresh == true) {
    //下拉刷新
    that.setData({
      refresh_h: false,
      load_h: true,
    });
  } else {
    //上拉加载
    that.setData({
      refresh_h: true,
      load_h: false,
    });
  }

  // 请求网络请求
  wx.request({
    url: parentUrl + curPage,
    data: {
      curPage: curPage,
      ctgTitles: ctgTitles,
      thumbnail: thumbnail,
    },
    method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
    header: {
      'content-type': 'application/json'
    },// 设置请求的 header
    success: function (res) {
      console.log(that.data.list);
      var list;
      if (res.statusCode == 200) {
        if (that.data.list == undefined) {
          list = [];
        } else {
          list = that.data.list;
        }
        for (var i = 0; i < res.data.result.list.length; i++) {
          list.push(res.data.result.list[i]);
        }
        that.setData({
          list: list,
        });
        curPage++;
        //这里判断了加载的页数大于10页，就显示底线
        if (curPage > 10){
          that.setData({
            refresh_h: true,
            load_h: true,
            line_h: false,
          });
        }else{
          that.setData({
            refresh_h: true,
            load_h: true,
            line_h: true,
          });
        }
      } else {

      }
    },
    fail: function (res) {

    },
    complete: function () {
      // complete
    }
  })
}

4.index.wxml中：

<loading hidden='{{refresh_h}}' bindchange="loadingChange">
  刷新中...
</loading>
<scroll-view style="height: {{windowHeight}}px; width: {{windowWidth}}px;" bindscroll="scroll" scroll-y="true" scroll-top="{{scrollTop}}" bindscrolltoupper="topLoad" bindscrolltolower="downLoad">
  <block wx:for="{{list}}" wx:key="listKey">
    <view class="myView">
      <image class="image" src="{{item.thumbnail}}"></image>
      <view class="title">{{item.ctgTitles}}</view>
      <view class="body">{{item.name}}</view>
    </view>
  </block>
</scroll-view>
<view class="line" hidden="{{line_h}}">--别太放肆，我是有底线的--</view>
<loading hidden="{{load_h}}" bindchange="loadingChange">
  加载中...
</loading>

5.index.wxss中：

.image {
  width: 200rpx;
  height: 200rpx;
  float: left;
}

.myView {
  width: 100%;
  float: left;
  margin: 10px;
}

.title {
  font-size: 12px;
  padding-left: 10px;
  padding-top: 15px;
  float: left;
}

.body {
  font-size: 10px;
  float: left;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
}

.line {
  font-size: 12px;
  width: 100%;
  height: 50rpx;
  text-align: center;
}

二、第二种实现方式：

1.官方文档：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t=20161107

2.效果图如下：

这里写图片描述

3.second.js中：

// pages/second/second.js
const parentUrl = "http://apicloud.mob.com/v1/cook/menu/search?name=%E7%BA%A2%E7%83%A7%E8%82%89&cid=0010001007&key=17113fceca309&size=20&page=";
var curPage = 0;
var ctgTitles;
var thumbnail;
var isFirst = true;
Page({

  /**
   * 页面的初始数据
   */
  data: {
    load_h: true,//加载
    line_h: true,//底线
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //设置第一次数据
    wx.startPullDownRefresh;
    var that = this;
    GetList(that);
  },


  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    console.log("监听用户下拉动作");
    var that = this;
    curPage = 0;
    isFirst = true;
    that.setData({
      list: [],
    })
    GetList(that);
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log("监听用户上拉拉动作");
    var that = this;
    GetList(that);
  },

})


var GetList = function (that) {
  //设置加载提示窗是否显示
  if (isFirst == true){
    //第一次请求数据
    that.setData({
      load_h: true,
    });
    isFirst = false;
  }else{
    that.setData({
      load_h: false,
    });
  }

  // 请求网络请求
  wx.request({
    url: parentUrl + curPage,
    data: {
      curPage: curPage,
      ctgTitles: ctgTitles,
      thumbnail: thumbnail,
    },
    method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
    header: {
      'content-type': 'application/json'
    },// 设置请求的 header
    success: function (res) {
      // console.log(that.data.list);
      var list;
      if (res.statusCode == 200) {
        //成功停止刷新
        wx.stopPullDownRefresh;
        if (that.data.list == undefined) {
          list = [];
        } else {
          list = that.data.list;
        }
        for (var i = 0; i < res.data.result.list.length; i++) {
          list.push(res.data.result.list[i]);
        }
        that.setData({
          list: list,
        });

        curPage++;
        //这里判断了加载的页数大于10页，就显示底线
        if (curPage > 10) {
          that.setData({
            load_h: true,
            line_h: false,
          });
        } else {
          that.setData({
            load_h: true,
            line_h: true,
          });
        }
      } else {

      }
    },
    fail: function (res) {
      //失败停止刷新
      wx.stopPullDownRefresh;
    },
    complete: function () {
      // complete
    }
  })
}

4.second.wxml中：

<view>
  <block wx:for="{{list}}" wx:key="listKey">
    <view class="myView">
      <image class="image" src="{{item.thumbnail}}"></image>
      <view class="title">{{item.ctgTitles}}</view>
      <view class="body">{{item.name}}</view>
    </view>
  </block>
</view>
<view class="line" hidden="{{line_h}}">--别太放肆，我是有底线的--</view>
<loading hidden="{{load_h}}" bindchange="loadingChange">
  加载中...
</loading>

5.second.wxss中：

.line {
  font-size: 12px;
  width: 100%;
  height: 50rpx;
  text-align: center;
}
.image{
  width: 95%;
  margin: 20rpx;
}

.title{
   font-size: 18px;
   margin-left: 20rpx;
}

.body{
   font-size: 16px;
   margin-left: 20rpx;
}

6.second.json中：

{
  "enablePullDownRefresh": true
}

7.demo地址：

http://download.csdn.net/download/afanbaby/10164329

本人菜鸟一个，有什么不对的地方希望大家指出评论，大神勿喷，希望大家一起学习进步！

Afanbaby
关注
专栏目录
小白学习微信小程序的下拉刷新和上拉加载更多
吃不胖.
09-12 2076
<image class="refreshing-icon" src="../../images/loading@2x.gif"></image> <view class="refreshing-text">正在刷新</view>
微信小程序上拉加载、下拉刷新的使用方法
码尚有缘的博客
11-12 358
首次加载页面请求数据后，进行判断：如果数据请求完毕显示‘没有更多了’操作下拉刷新时，设置当前页数、总数、请求列表清零等。在页面的 .json 配置文件中，将。再次发起请求，请求完毕停止下拉刷新效果。每次请求十条数据，并添加到数据列表中。
微信小程序使用scroll-view实现上拉加载下拉刷新
XXCJLRC的博客
08-18 654
没啥技术含量的一篇文章，小白文，原生的微信小程序使用scroll-view实现上拉加载下拉刷新。主要是为了记录一下，下次用到直接拿。有问题call我就行。代码：wxml的代码 list是直接写死的。
【微信小程序开发】小程序中的上滑加载更多，下拉刷新的实现
最新发布
zz130428的博客
07-31 380
要实现，往上拉，拉到最底部时，显示更多的数字，需要在goods.json文件中配置onReachBottomDistance。onReachBottomDistance的意思是，当拉到距离底部距离多少rpx时开始触发加载更多。滑动加载数据，在js代码中是固定的函数名 onReachBottom。###json中配置###小程序上拉，显示更多数据。重新建个tarbar。
微信小程序上拉、下拉刷新组封装件
WanFengZhou
03-07 869
在开发小程序的时候通常会遇到上拉或者下拉刷新的功能需求，然而这个功能很多页面也都会用到，因此这里，把这个功能封装为组件，方便复用
微信小程序——常用功能4：实现下拉刷新和上拉加载
最强的森的博客
11-29 2218
微信小程序——常用功能4：实现下拉刷新和上拉加载 今天跟大家学习一下小程序下拉刷新和上拉加载两个功能。 由于我不是专业搞开发的，所以之前踩了很多坑，我先跟大家说一下这两个功能我的看法： 1.下拉刷新。 由于小程序是加强前端开发、弱化后端开发的开发方式，所以基本上使用setdata的方法就可以实现页面的实时更新。所以这个功能我认为想要用来刷新页面的话就很鸡肋。 它的主要作用是在用户下拉刷新的时候调用某些接口，实现更多功能。 如果你没有使用数据实时更新的方法实现你的效果就可以用到这个功能，加一个跳转接口，跳转
微信小程序快速入门——分页（上拉加载、下拉刷新、节流阀）
每天一个前端小知识~
05-24 4134
前端工作常用组件
【微信小程序】实现小程序下拉刷新与上拉加载
宾有为的博客
05-30 4598
微信小程序内置的上拉加载、下拉刷新与Android原生的有所不同，Android原生下拉刷新用SwipeRefreshLayout组件，重写onRefresh方法，而上拉加载则是使用RecycleView的addOnScrollListener去监听RecycleView是否已拉到底部，从而实现上拉加载。而小程序则有所不同，小程序的不同主要体现在每一个界面的js文件都有两个监听上拉(onReachBottom）与下拉(onPullDownRefresh）的方法，，因此在这里所说的自定义下拉刷新与上拉加载并.
让你的微信小程序对用户更加友好：上拉加载和下拉刷新就是关键
Shids_的博客
04-07 1万+
让你的微信小程序对用户更加友好：上拉加载和下拉刷新就是关键
微信scroll-view小程序实现上拉加载下拉刷新
weixin_46328739的博客
12-13 1634
在使用微信小程序时避免不了查询列表实现分页功能，在这里分享下使用croll-view实现上拉加载下拉刷新功能,
微信小程序，两种方式实现上拉加载，下拉刷新
12-19
在微信小程序中，为了提供优秀的用户体验，特别是在处理大量数据列表时，通常会采用上拉加载（无限滚动）和下拉刷新的功能。这两种交互方式让用户在查看列表时无需手动翻页，而是通过简单的手势就能更新或加载更多...
微信小程序，使用scroll-view实现下拉加载更多（下一页）源码
08-05
微信小程序，使用scroll-view实现下拉加载更多（下一页）源码。 可查看文章:http://blog.csdn.net/dKnightL/article/details/76724205
微信小程序实现页面下拉刷新和上拉加载功能详解
10-17
微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的概念，用户扫一扫或搜一下即可打开...通过上述步骤，我们就可以在微信小程序中实现页面下拉刷新和上拉加载功能，从而提供更好的用户体验。
微信小程序学习：下拉刷新上拉加载与弹窗的两种姿势
03-29
在js文件里直接重写"onPullDownRefresh"和"onReachBottom"方法即可；...console.log('刷新'); }, onReachBottom: function() { // Do something when page reach bottom. console.log('circle 下一页'); }, 在s
微信小程序 下拉刷新及上拉加载原理解析
10-16
微信小程序提供了两种数据交互方式来提升用户操作的流畅度和用户体验，这两种方式分别是下拉刷新和上拉加载更多。下拉刷新通常用于获取最新的数据列表，而上拉加载更多则用于在列表内容即将触底时加载更多内容。这两...
【微信小程序开发】小程序中的上滑加载更多，下拉刷新是如何实现的？
热门推荐
景天科技苑
06-05 2万+
小程序是如何实现下滑加载更多数据，下拉刷新页面的，本文就来详细探讨一下。
微信小程序页面事件 - 下拉刷新与上拉触底
m0_61631823的博客
03-22 7619
一、下拉刷新 1.概念：下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。 2. 启用下拉刷新 启用下拉刷新有两种方式： ①全局开启下拉刷新 在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true ②局部开启下拉刷新 在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true 在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下
小程序 uniApp 下拉刷新 上拉加载
m0_60505147的博客
09-15 2390
在小程序和uniapp 中 可以通过 这个组件来实现 下拉刷新 和 上拉加载的功能。设置下拉刷新的状态 （true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发）往往需要的操作 就是将 当前页面的数据重置 对于固定的数据 只需要重新发起一次请求 ，对于。// 上拉加载 只需要 调用组件中 请求列表数据的方法。只需要清空之前记录的数据 ，在页面更新时在发起请求。// css 要加 不然滚动刷新不触发。可以实现 横向 或纵向的滚动。下拉刷新的目的 就是。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值