本文基于dva和ant-design-mobile的PullToRefresh組件來講解移動端H5滑動刷新

• 本文適用于剛接觸redux或dva的初學(xué)者，致力于幫助他們快速解決問題，理解redux原理的讀者可以跳過

移動端拉動加載數(shù)據(jù)

其實也就是分頁，不同于pc端的話可能就是需要把上一頁的請求數(shù)據(jù)和這一頁的拼接起來

• 上代碼 /list.js

<PullToRefresh
          damping={60}
          direction='up'
          onRefresh={() => {
            this.setState({
              refreshing: true,
              pageNum: this.state.pageNum += 1
            }, () => {
              this.getlist()
            });
          }}
        >
        // 實現(xiàn)獲得到數(shù)據(jù)后的列表   或者是空
        </PullToRefresh>

• 記得要@connect哦。
• pageNum初始1 拉一次加1一次 很好理解吧我們來看getlist()部分

getlist()內(nèi) 我們需要去dispatch獲得列表數(shù)據(jù)的那個action（action概念可以去看下redux）

getlist() {
    dispatch({
      type: 'orderlist/waiting_delivery',
      payload: {
          orderStatus: id,
          pageNum: this.state.pageNum, //請求的頁碼
          pageSize: 5 //每次返回多少條
      }
    });
  }

• 然后我們看下models的waiting_delivery

export default {
  namespace: 'orderlist',
  effects: {
    *waiting_delivery({ payload, callback }, { call, put }) {
      const response = yield call(reg, payload);
      yield put({
        type: 'waitingDelivery',
        payload: response
      });
      if (response) {
        callback(response);
      }
    },
  },
  reducers: {
   waitingDelivery(state, { payload:{data} }) {
      if (data.current > 1) {  //這個判斷得看你們自己的返回數(shù)據(jù)的結(jié)構(gòu)
        data.records = state.waitingDelivery.records.concat(data.records)  //拼接上一頁數(shù)據(jù)，其實就是拼接保存在redux的store里的上一次請求的數(shù)據(jù)
        return { ...state, waitingDelivery:{...data}}  //最后就是用擴展運算符去接收咯
      } else {
        return { ...state, waitingDelivery:{...data}}
      }
    },
  }
}

• if (data.current > 1) 這個判斷得看你們自己的返回數(shù)據(jù)的結(jié)構(gòu)
• data.records = state.waitingDelivery.records.concat(data.records) 拼接上一頁數(shù)據(jù)，其實就是拼接保存在redux的store里的上一次請求的數(shù)據(jù)
• return { ...state, waitingDelivery:{...data}} //最后就是用擴展運算符去接收咯

打完收工，寫的比較簡單，內(nèi)容也比較陳芝麻爛谷子，希望能幫到有需要的讀者吧！有問題可以在評論區(qū)留言！