微信小程序开发(十四)scroll-view实现下拉刷新上拉加载更多

之前在做原生app开发的时候，下拉刷新和上拉加载更多是使用的比较多的一个功能了。现在在做微信小程序开发，小程序只提供了下拉刷新的接口。那么下拉刷新和上拉加载更多就需要我们换个思路实现了。

关于scroll-view

什么是scroll-view

scroll-view：可滚动视图区域。

scroll-view的属性

注意点

使用竖向滚动时，需要给一个固定高度，通过 WXSS 设置 height。

Bug & Tip

1. 请勿在 scroll-view 中使用 textarea、map、canvas、video 组件
2. scroll-into-view 的优先级高于 scroll-top
3. 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh
4. 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部
   在这里其实也就说了在使用scroll-view时是不能使用onPullDownRefresh了。

效果图

代码实现

wxml文件

<view class="header" hidden="{{hideHeader}}">
  <view>下拉刷新中……view>
  <view>{{refreshTime}}view>
view>
<scroll-view class="list" style="height: 1208rpx" scroll-y="true" bindscrolltoupper="refresh" bindscrolltolower="loadMore">
  <view class="item" wx:for="{{contentlist}}" wx:key="index">
    <view class="left">
      <image src="{{item.contentImg}}">image>
    view>
    <view class="right">{{item.title}}view>
  view>
scroll-view>
<view class="bottom" hidden="{{hideBottom}}">
  <view>{{loadMoreData}}view>
  <view>{{refreshTime}}view>
view>

这里就是页面结构，上下都是下拉和上拉才会显示的。中间的scroll-view才是滚动视图。

js文件

  /**
   * 页面的初始数据
   */
  data: {
    hideHeader: true,
    hideBottom: true,
    refreshTime: '', // 刷新的时间 
    contentlist: [], // 列表显示的数据源
    allPages: '',    // 总页数
    currentPage: 1,  // 当前页数  默认是1
    loadMoreData: '加载更多……' 
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var date = new Date();
    this.setData({  
      refreshTime: date.toLocaleTimeString()
    })
    this.getData();
  },
  // 上拉加载更多
  loadMore: function(){
    var self = this;
    // 当前页是最后一页
    if (self.data.currentPage == self.data.allPages){
      self.setData({
        loadMoreData: '已经到顶'
      })
      return;
    }
    setTimeout(function(){
      console.log('上拉加载更多');
      var tempCurrentPage = self.data.currentPage;
      tempCurrentPage = tempCurrentPage + 1;
      self.setData({
        currentPage: tempCurrentPage,
        hideBottom: false  
      })
      self.getData();  
    },300);
  },
  // 下拉刷新
  refresh: function(e){
    var self = this;
    setTimeout(function(){
      console.log('下拉刷新');
      var date = new Date();
      self.setData({
        currentPage: 1,
        refreshTime: date.toLocaleTimeString(),
        hideHeader: false
      })
      self.getData();
    },300);
  },
  // 获取数据  pageIndex：页码参数
  getData: function(){
    var self = this;
    var pageIndex = self.data.currentPage;
    wx.request({
      url: 'https://route.showapi.com/582-2',
      data: {
        showapi_appid: '19297',
        showapi_sign: 'cf606a68a01f45d196b0061a1046b5b3',
        page: pageIndex
      },
      success: function(res){
        var dataModel = res.data;
        if (dataModel.showapi_res_code == 0){
          if (dataModel.showapi_res_body.ret_code == 0){
            if(pageIndex == 1){ // 下拉刷新
              self.setData({
                allPages: dataModel.showapi_res_body.pagebean.allPages,
                contentlist: dataModel.showapi_res_body.pagebean.contentlist,
                hideHeader: true
              })
            }else{ // 加载更多
              console.log('加载更多');
              var tempArray = self.data.contentlist;
              tempArray = tempArray.concat(dataModel.showapi_res_body.pagebean.contentlist);
              self.setData({
                allPages: dataModel.showapi_res_body.pagebean.allPages,
                contentlist: tempArray,
                hideBottom: true
              })
            }
          }
        }
      },
      fail: function(){

      }
    })
  },

分析

这里js代码里面其实就是处理逻辑。上拉的时候我们需要在数组contentlist的后面拼接数据和处理请求的页码；下拉的时候我们需要把当前页码设置成1，contentlist取当前网络请求的数据。网络请求getData函数上拉下拉的区分是通过当前页码值区分的。
在scroll-view的上拉和下拉事件中，我都加了一个定时，这里是为了延长上拉下拉视图的显示时间。