微信小程序实现下拉刷新和上划加载与索引栏结合

问题描述：

微信小程序实现下拉刷新和上划加载时，通常使用scroll-view，但是scroll-view无法实现原地下拉刷新，只有先向下滚动后再滚动到顶部时才会触发，不适用于一些数据加载场景，也不适合与索引共同使用。

代码实现：

通过系统自带的下拉刷新和触底方法，实现与索引结合的需求。

.wxml

<van-index-bar index-list="{{ indexList }}" scroll-top="{{ scrollTop }}">
    <view wx:for="{{indexDataList }}" wx:key="idx" wx:for-index="idx" wx:for-item="item" data-item="{{item}}">
        <van-index-anchor index="{{item.date}}" bindtap="dateClick" data-index='{{idx}}' />
        <view class="list-bg shadow" wx:for="{{item.List}}" wx:key="ids" wx:for-index="idxs" wx:for-item="items"
            data-item="{{items}}">
            <view class="title">{{items.settlementDate }}</view>
            <van-field value="{{items.settlementPrice}}元" label="打款金额" left-icon="gold-coin-o" readonly
                border="{{ false }}" />
            <van-cell is-link title="详情" link-type="navigateTo"
                url="/pages/system/dashboard/details/index?orderNumList={{items.settlementOrder}}" />
        </view>
    </view>
</van-index-bar>
<view class="tips1" wx:if="{{tipShow}}">
    <view wx:if="{{hasMore}}"
        style="display: flex;flex-direction: row;align-items: center;align-self: center;justify-content: center;">
        加载中...
    </view>
    <view wx:else><text>没有更多内容了</text></view>
</view>
<view class="bottom"></view> //占位，防止底部导航栏遮挡数据

.js

var requestUtils = require('../../../../utils/request.js');
var Data = require("../../../../utils/data");
const app = getApp()
Page({
  data: {
     /** 索引栏*/
     indexList: [],
     scrollTop: 0,
     pageNum: 1, // 页码
     indexDataList: [],
     incomeList: [],
     pageNum: 1, //页码，从1开始
     hasMore: true, // 用于判断是否加载完成
     tipShow: false, // 提示信息显隐控制
     refreshTime: '',
  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.getTabBar().init();
  },
  onLoad: function (options) {
    if (app.globalData.globalUserAccount) {
      this.setData({
        account: app.globalData.globalUserAccount
      });
    }

    // 初始化后台数据 获取列表
    this.getBillIncome();
  },

  //索引栏发生变化事件	
  onPageScroll(event) {
    this.setData({
      scrollTop: event.scrollTop,
    });
  },


  // 下拉刷新
  onPullDownRefresh: function () {
    var _this = this;
    setTimeout(function () {
      console.log('下拉刷新');
      var date = new Date();
      _this.setData({
        pageNum: 1,
        incomeList: [],
        indexList: [],
        indexDataList: [],
        hasMore: true,
        refreshTime: date.toLocaleTimeString(),
      })
      _this.getBillIncome();
      wx.stopPullDownRefresh() //刷新完成后停止下拉刷新动效
    }, 300);

  },


  // 滑动到底部时触发
  onReachBottom: function () {
    console.log("滑动到底部")
    if (!this.data.hasMore) return
    //加载更多
    this.getBillIncome();

  },


  /**
   * 后台获取数据
   */
  getBillIncome() {
    let _this = this
    let requestData = {
      writerTelephone: this.data.account,
      pageNumber: this.data.pageNum,
      pageSize: 10,
    };
    this.setData({
      tipShow: true,
    });
    requestUtils.request({
      url: Data.getBillIncome,
      data: requestData,
      method: 'GET'
    }).then(function (res) {
      // 未查询到符合条件的数据
      if (res.data.data.total == 0) {
        console.log("未查询到符合条件的数据")
        _this.setData({
          hasMore: false,
        });
        return
      }
      if (res.data.data.lastPage < _this.data.pageNum) {
        // 已查询到最后的数据，不再进行插入
        console.log("已查询到最后的数据，不再进行插入")
        _this.setData({
          hasMore: false,
        });
        return;
      } else {
        // 页面+1
        console.log("获取到数据，页面+1")
        _this.setData({
          pageNum: _this.data.pageNum + 1
        });

        let array = res.data.data.list;
        // 获取结果
        _this.setData({
          // 将查询结果添加到已有数据中
          incomeList: _this.data.incomeList.concat(array)
        });
        _this.formatList(array);

      }
      if (_this.data.incomeList.length == res.data.data.total) {
        _this.setData({
          hasMore: false,
        });
        return
      }
    }).catch(reason => {
      // 提示失败
      wx.showToast({
        title: '发送失败',
        icon: 'none',
        duration: 3000,
      })
    })
  },

  // 将获取到的列表处理为适用于索引的格式
  formatList(arr) {
    // let arr = this.data.incomeList
    let dataArr = this.data.indexDataList;
    arr.map(mapItem => {
      if (dataArr.length == 0) {
        dataArr.push({
          date: mapItem.settlementDate.slice(0, 4),
          List: [mapItem]
        })
        var tmpArr = this.data.indexList;
        tmpArr.push(mapItem.settlementDate.slice(0, 4)); //追加的方式和之前加载的对象数据连接在一起
        this.setData({
          indexList: tmpArr
        })
      } else {
        let res = dataArr.some(item => { //判断相同是否日期，是就添加到当前项
          if (item.date == mapItem.settlementDate.slice(0, 4)) {
            item.List.push(mapItem)
            return true
          }
        })
        if (!res) { //如果没找相同日期添加一个新对象
          dataArr.push({
            date: mapItem.settlementDate.slice(0, 4),
            List: [mapItem]
          })
          var tmpArr = this.data.indexList;
          tmpArr.push(mapItem.settlementDate.slice(0, 4)); //追加的方式和之前加载的对象数据连接在一起
          this.setData({
            indexList: tmpArr
          })
        }
      }
    })
    this.setData({
      indexDataList: dataArr
    })
  },
})

.json

{
  "usingComponents": {
    "navigation-bar": "../../../../components/navigation-bar/navigation-bar"
  },
  "enablePullDownRefresh": true,
  "onReachBottomDistance":20,
  "navigationBarTitleText": "首页"
}