微信小程序中使用scroll-view组件实现下拉刷新功能

wxml

<view style="width: auto; height: 100vh;">
  <view style="width: auto; height: 100vh;">
    
    <scroll-view class="scroll-view" scroll-y scroll-x 
      refresher-enabled="{{isRefresherEnabled}}" bindrefresherrefresh="downRefresh"
      enable-passive scroll-with-animation="true" refresher-background="#F7F7F7"
      refresher-triggered="{{isRefreshing}}">
      
      <view class="tableHeaderLayout">
        <view class="column1">{{tableHeader[0].label}}</view>
        <view class="column2">{{tableHeader[1].label}}</view>
        <view class="column3">{{tableHeader[2].label}}</view>
        <view class="column4">{{tableHeader[3].label}}</view>
        <view class="column5">{{tableHeader[4].label}}</view>
      </view>

      <view wx:for="{{dataList}}" wx:key="index">
          <view class="tableHeaderLayout">
            <view class="column1">{{index + 1}}</view>
            <view class="column2">{{item.productName}}</view>
            <view class="column3">{{item.status}}</view>
            <view class="column4">{{item.transdate2}}</view>
            <view class="column5">{{item.jobid}}</view>
          </view>
        </view>
      </scroll-view>
  </view>
</view>

wxss

.tableHeaderLayout {width: 138vw;height: 5vh;font-size: 0.85rem;display: flex;display: -webkit-flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start;align-items: center;}
.scroll-view {flex: 1;height: 99.7vh;border-top: 0.3vh solid #F7F7F7; }
.column1 {width: 10vw;height: 4.7vh;line-height: 4.7vh;text-align: center;border-bottom: 0.3vh solid #F7F7F7;border-right: 0.3vw solid #F7F7F7; }
.column2 {width: 18vw;height: 4.7vh;line-height: 4.7vh;text-align: center;border-bottom: 0.3vh solid #F7F7F7;border-right: 0.3vw solid #F7F7F7; }
.column3 {width: 12vw;height: 4.7vh;line-height: 4.7vh;text-align: center;border-bottom: 0.3vh solid #F7F7F7;border-right: 0.3vw solid #F7F7F7; }
.column4 {width: 40vw;height: 4.7vh;line-height: 4.7vh;text-align: center;border-bottom: 0.3vh solid #F7F7F7;border-right: 0.3vw solid #F7F7F7; }
.column5 {width: 55vw;height: 4.7vh;line-height: 4.7vh;text-align: center;border-bottom: 0.3vh solid #F7F7F7;border-right: 0.3vw solid #F7F7F7; }

js

Page({
  data: {
    dataList: [],
    tableHeader: [{prop: 'sid',width: 70,label: '序号'},{prop: 'productName',width: 90,label: '模板'},{prop: 'status',width: 90,label: '状态'},{prop: 'transdate2',width: 310,label: '交易时间'},{prop: 'jobid',width: 440,label: '流水号'} ],
    startIndex: 0,
    count: 10,
    isRefreshing: true,//设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
    isRefresherEnabled: true,//开启自定义下拉刷新
  },
  
  onLoad(options) {
    //初始化时，从服务器获取数据，给dataList赋值，此处略
  },
  
  downRefresh: function(e){
    console.log('下拉刷新')
      let pageindex = this.data.startIndex
      let count = this.data.count
      pageindex += 1 * count;
      console.log('pageindex='+pageindex, 'count='+count)
      //服务器请求数据，此处略
      this.transHistory(pageindex, count);
      //isRefresherEnabled：开启自定义下拉刷新
      //isRefreshing: 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
      this.setData({
        isRefresherEnabled: true,
        isRefreshing: false,
      })
      wx.showToast({title: '数据已更新', icon: 'none', duration: 2000})
  },
})