本文基于dva和ant-design-mobile的PullToRefresh組件來(lái)講解移動(dòng)端H5滑動(dòng)刷新
- 本文適用于剛接觸redux或dva的初學(xué)者，致力于幫助他們快速解決問(wèn)題，理解redux原理的讀者可以跳過(guò)
移動(dòng)端拉動(dòng)加載數(shù)據(jù)
其實(shí)也就是分頁(yè)逻卖，不同于pc端的話可能就是需要把上一頁(yè)的請(qǐng)求數(shù)據(jù)和這一頁(yè)的拼接起來(lái)
- 上代碼 /list.js
<PullToRefresh
damping={60}
direction='up'
onRefresh={() => {
this.setState({
refreshing: true,
pageNum: this.state.pageNum += 1
}, () => {
this.getlist()
});
}}
>
// 實(shí)現(xiàn)獲得到數(shù)據(jù)后的列表 或者是空
</PullToRefresh>
- 記得要@connect哦咖城。
- pageNum初始1 拉一次加1一次 很好理解吧我們來(lái)看
getlist()部分
getlist()內(nèi) 我們需要去dispatch獲得列表數(shù)據(jù)的那個(gè)action（action概念可以去看下redux）
getlist() {
dispatch({
type: 'orderlist/waiting_delivery',
payload: {
orderStatus: id,
pageNum: this.state.pageNum, //請(qǐng)求的頁(yè)碼
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) { //這個(gè)判斷得看你們自己的返回?cái)?shù)據(jù)的結(jié)構(gòu)
data.records = state.waitingDelivery.records.concat(data.records) //拼接上一頁(yè)數(shù)據(jù)蕾额，其實(shí)就是拼接保存在redux的store里的上一次請(qǐng)求的數(shù)據(jù)
return { ...state, waitingDelivery:{...data}} //最后就是用擴(kuò)展運(yùn)算符去接收咯
} else {
return { ...state, waitingDelivery:{...data}}
}
},
}
}
-
if (data.current > 1)這個(gè)判斷得看你們自己的返回?cái)?shù)據(jù)的結(jié)構(gòu) -
data.records = state.waitingDelivery.records.concat(data.records)拼接上一頁(yè)數(shù)據(jù)崭庸，其實(shí)就是拼接保存在redux的store里的上一次請(qǐng)求的數(shù)據(jù) -
return { ...state, waitingDelivery:{...data}}//最后就是用擴(kuò)展運(yùn)算符去接收咯
打完收工梳玫，寫(xiě)的比較簡(jiǎn)單谍珊，內(nèi)容也比較陳芝麻爛谷子治宣，希望能幫到有需要的讀者吧！有問(wèn)題可以在評(píng)論區(qū)留言！
