微信小程序开发之上拉刷新

小程序的顶部和底部都有默认的监听事件,这个组件的官方文档scroll-view,这个组件的属性如下:

scroll-view

可滚动视图区域

属性名 类型 默认值 说明
scroll-x Boolean false 允许横向滚动
scroll-y Boolean false 允许纵向滚动
upper-threshold Number 50 距顶部/左边多远时(单位px),触发 scrolltoupper 事件
lower-threshold Number 50 距底部/右边多远时(单位px),触发 scrolltolower 事件
scroll-top Number 设置竖向滚动条位置
scroll-left Number 设置横向滚动条位置
scroll-into-view String 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素
scroll-with-animation Boolean false 在设置滚动条位置时使用动画过渡
enable-back-to-top Boolean false iOS点击顶部状态栏、安卓双击标题栏时,滚动条返回顶部,只支持竖向
bindscrolltoupper EventHandle 滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolower EventHandle 滚动到底部/右边,会触发 scrolltolower 事件
bindscroll EventHandle 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

其中scroll-y,bindscrolltolower,bindscrolltoupper三个组件是分页需要用到的。

实现程序

  1. 我们需要在*.wxml中声明这个组件,组件内容加入需要展示的内容

    <!--
    - scroll-y="true" 为纵向滚动的必要声明
    - bindscrolltolower="loadMore" 为页面底部的监听事件,即上拉刷新事件
    - bindscrolltoupper="refresh" 为页面顶部的监听事件,即下拉刷新事件
    -->
    <scroll-view class="scroll-box" style="height:{{winHeight}}" scroll-y="true" bindscrolltolower="loadMore" bindscrolltoupper="refresh">
        <!--内容部分-->
        <view class="content">
          <view wx:for="{{content}}" wx:key="item">
           ……
          </view>
        </view>
    </scroll-view>
    
  2. 针对顶部和底部的监听事件进行业务处理
    //获取应用实例
    var app = getApp();
    Page({
      data: {
        userInfo: {},
        content: [],
        winHeight: 0
      },
      page: {//分页查询参数
        pageNum: 1,//初始页码
        pageSize: 10,//单页条数
        dataSize: 0,//总数据条数,初始为0
        hasRefresh: true //刷新状态
      },
      onLoad: function () {//页面初始加载事件
        var that = this;//复制this对象到临时变量
        wx.getSystemInfo({
          success: function (res) {
            that.setData({
              winHeight: res.windowHeight
            });
          }
        })
        loadData(that);
      },
    
      loadMore: function () {
        wx.showToast({
          title: '刷新中…',
          icon: 'loading',
          duration: 1000
        });
        var that = this;
        loadData(that);
      },
      refresh: function () {
        console.log("下拉刷新....")
        this.onLoad();
      }
    })
    //数据加载
    var loadData = function (that) {
      var pageCount = 1;
      if (that.page.dataSize > 0 && that.page.dataSize % that.page.pageSize == 0) {
        pageCount = parseInt(that.page.dataSize / that.page.pageSize);
      } else {
        pageCount = parseInt(that.page.dataSize / that.page.pageSize) + 1;
      }
      if (!that.page.hasRefresh) {
        return;
      }
      that.page.hasRefresh = false;//阻塞标识符,防止本次处理未结束前出现重复请求
      var limit_start = that.page.pageSize * (that.page.pageNum - 1);
      var limit_end = that.page.pageSize * that.page.pageNum;
      if (that.page.pageNum > pageCount) {
        return;
      }
      wx.request({
        url: 'https://*****/goods/list',
        data: {
          limit_start: limit_start,
          limit_end: limit_end
        },
        method: 'GET',
        header: {
          'content-type': 'application/json'
        },
        success: function (res) {
          that.setData({
            content: that.data.content.concat(res.data.list)
          });
          that.page.dataSize = limit_start == 0 ? res.data.dataSize : that.page.dataSize;
          that.page.pageNum++;
          that.page.hasRefresh = true;//释放阻塞
        }
      })
    }
    

注意事项

  1. 分页数据拼装到一页进行显示时,需要将每次请求的结果集进行合并处理,参考上文中

    success: function (res) {
    that.setData({
    'content: that.data.content.concat(res.data.list)'
    });
    }
  2. scroll-view标签设置了bindscrolltolower,实现上拉加载时,数据重复请求
    小程序的请求处理需要一定时间,而实际使用中,在请求结束前经常发生多次触发底部监听事件的情况,小程序组件中并为对此做处理,需要我们额外增加标识位来阻塞重复请求,参考样例代码中hasRefresh的处理
时间: 2024-12-17 18:47:20

微信小程序开发之上拉刷新的相关文章

详解微信小程序开发之下拉刷新 上拉加载_javascript技巧

微信小程序中的下拉刷新,上拉加载的功能很常见,目前我知道的有两种可行的方法,一是scroll-view,二是整个页面刷新.今天说说第一种,自己造轮子,难免有些瑕疵,日后慢慢完善. 上gif: 原理: scroll-view中有监听滑动的方法,这个跟Android类似.其中用到了滑动到顶部,滑动到底部的方法. 1.下拉刷新,在滑动到顶部时,bindscrolltoupper被调用,根据自己的业务逻辑请求即可.我的demo只是随机换了个关键字. 2.上拉加载,在滑动到底部时,bindscrollto

微信小程序开发基础知识总结

微信小程序在无论在功能.文档及相关支持方面,都是优于前面几种微信账号类型,它提供了很多原生程序才有的接口,使得我们的小程序在很多方面突破H5页面应用的限制,更加接近原生程序的功能,因此微信小程序具有很大的前景想象力.它提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上. 1.小程序的目录结构 小程序的目录结构如下所示. 其中项目级别的的文件包括 app.js.ap

微信小程序开发(3) 热门电影

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发热门电影及预览功能. 本文主要分为两个部分,小程序主体部分及电影主页和详情页页面部分   一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:   1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, on

微信小程序开发教程第五章:微信小程序名片夹详情页开发

前面我们发布了博卡君的微信小程序开发教程前四章,现在接着更新第五章:微信小程序名片夹详情页开发.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发)   今天加了新干货!除了开发日志本身,还回答了一些朋友的问题. 闲话不多说,先看下「名片盒」详情页的效果图:   备注下大致需求:顶部背后是轮播图,二维码按钮弹出模态框信息.点击微信栏.点击存入手机,地址栏需要地图展示,名片分享也是模态框指引. 首先是轮播图,autoplay 自动播放,interval 轮播

微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现

接着上面微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现.(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程序名片夹详情页开发,第六章:「我」的页面开发,第七章:微信小程序编辑名片页面开发) 先来看看今天的整体思路: 进入分组管理页面-->点击新建分组新建 进入到未分组页面基本操作 进入到已建分组里面底部菜单栏操作-->从名片夹中添加进行操作. 理清完基本流程我们开始开发.首先整个布局可以先看下,我再一步步讲. 静态布

微信小程序开发(1) 天气预报

本文介绍如何使用微信小程序开发天气预报功能.   一.项目文件列表   二.小程序配置 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. { "pages":[ "pages/index/index" ], "window":{ "backgroundTextStyle":"light", "navigationBarBack

微信小程序开发(2) 计算器

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发计算器功能. 本文主要分为两个部分,小程序主体部分及计算器业务页面部分   一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:   1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: f

微信小程序开发(5) 2048游戏

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发2048小游戏. 本文主要分为两个部分,小程序主体部分及小游戏页面部分   一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:   1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: f

微信小程序开发(4) 企业展示

在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发企业内部宣传展示等功能.   一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:   1. 小程序逻辑 App({ onLaunch: function() { // Do something initial when launch. }, onShow: function() { // Do something when show. }, onHide: function() { // Do somet