摘要： 本节针对微信小程序开发中上下拉刷新进行总结整理，小程序的内容刷新，简单来说就是针对页面顶部和底部的监听事件进行逻辑操作，接下来我们结合代码进行展开

小程序的顶部和底部都有默认的监听事件，这个组件的官方文档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中声明这个组件，组件内容加入需要展示的内容

2.

<!--

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

3.

4.

针对顶部和底部的监听事件进行业务处理

5.

//获取应用实例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;//释放阻塞

    }

  })

}

6.

注意事项

1.

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

2.

success: function (res) {

  that.setData({

    'content: that.data.content.concat(res.data.list)'

  });

}

3.

4.

scroll-view标签设置了bindscrolltolower，实现上拉加载时，数据重复请求

5.

小程序的请求处理需要一定时间，而实际使用中，在请求结束前经常发生多次触发底部监听事件的情况，小程序组件中并为对此做处理，需要我们额外增加标识位来阻塞重复请求，参考样例代码中`hasRefresh`的处理

希望这篇微信开发文章可以帮助到你。总之，同学们，你想要的职坐标微信开发频道都能找到!