react-native ListView下拉刷新上拉加載實(shí)現(xiàn)代碼
本文介紹了react-native ListView下拉刷新上拉加載實(shí)現(xiàn)。分享給大家，具體如下：
先看效果圖
下拉刷新
React Native提供了一個(gè)組件可以實(shí)現(xiàn)下拉刷新方法RefreshControl
使用方法
<ListView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh.bind(this)}
/>
}
//...
</ListView>
在視圖加載的時(shí)候的時(shí)候，將refreshing設(shè)置為true，數(shù)據(jù)加載完成設(shè)置為false即可
上拉加載
利用ListView里的onEndReached方法實(shí)現(xiàn)，ListView在滾動(dòng)到最后一個(gè)Cell的時(shí)候,會(huì)觸發(fā)onEndReached方法
先在ListView里添加一個(gè)Footer
render() {
const FooterView = this.state.loadMore ?
<View style={styles.footer}>
<Text style=>加載更多...</Text>
</View> : null;
return <ListView
refreshControl={
<RefreshControl
refreshing={this.state.refreshing}
onRefresh={this._onRefresh.bind(this)}
/>
}
style={[styles.listView]}
dataSource={ds.cloneWithRows(this.state.dataSource)}
enableEmptySections={true}
renderRow={this._renderRow.bind(this)}
onEndReachedThreshold={5}
onEndReached={this._onEndReached.bind(this)}
renderFooter={() => FooterView}
/>
}
在方法_onEndReached里將Footer顯示出來(lái)，在數(shù)據(jù)加載完成之后，再隱藏掉Footer
_onEndReached() {
this.setState({
loadMore: true,
pageNo: this.state.pageNo + 1
});
this._fetchData();
}
說(shuō)明
ListView里還設(shè)置了一個(gè)參數(shù)onEndReachedThreshold這個(gè)參數(shù)與onEndReached配合使用，它的意思是：像素的臨界值，該屬性和onEndReached配合使用，因?yàn)閛nEndReached滑動(dòng)結(jié)束的標(biāo)志是以該值作為判斷條件的
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了React?之?Suspense提出的背景及使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
淺談react?16.8版本新特性以及對(duì)react開(kāi)發(fā)的影響
本文主要介紹了react?16.8版本新特性以及對(duì)react開(kāi)發(fā)的影響，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
useEffect?返回函數(shù)執(zhí)行過(guò)程源碼解析
這篇文章主要為大家介紹了useEffect?返回函數(shù)執(zhí)行過(guò)程源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
React Hooks獲取數(shù)據(jù)實(shí)現(xiàn)方法介紹
這篇文章主要介紹了react hooks獲取數(shù)據(jù),文中給大家介紹了useState dispatch函數(shù)如何與其使用的Function Component進(jìn)行綁定，實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-10-10
React中完整實(shí)例講解Recoil狀態(tài)管理庫(kù)的使用
這篇文章主要介紹了React中Recoil狀態(tài)管理庫(kù)的使用，Recoil的產(chǎn)生源于Facebook內(nèi)部一個(gè)可視化數(shù)據(jù)分析相關(guān)的應(yīng)用，在使用React的實(shí)現(xiàn)的過(guò)程中，因?yàn)楝F(xiàn)有狀態(tài)管理工具不能很好的滿足應(yīng)用的需求，因此催生出了Recoil，對(duì)Recoil感興趣可以參考下文2023-05-05
react16+antd4 RangePicker組件實(shí)現(xiàn)時(shí)間禁選示例
這篇文章主要為大家介紹了react16+antd4 RangePicker 時(shí)間禁選示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
react裝飾器與高階組件及簡(jiǎn)單樣式修改的操作詳解
這篇文章主要介紹了react裝飾器與高階組件及簡(jiǎn)單樣式修改的操作，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2022-09-09
這篇文章主要為大家介紹了React?模式之純組件使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
搭建React?Native熱更新平臺(tái)的詳細(xì)過(guò)程
這篇文章主要介紹了搭建React?Native熱更新平臺(tái),要實(shí)現(xiàn)?React?Native?熱更新功能，有四種思路?Code?Push、Pushy、Expo?和自研，感興趣的朋友一起通過(guò)本文學(xué)習(xí)吧2022-05-05
antd?是基于?Ant?Design?設(shè)計(jì)體系的?React?UI?組件庫(kù)，主要用于研發(fā)企業(yè)級(jí)中后臺(tái)產(chǎn)品，這篇文章主要介紹了React中使用antd組件,需要的朋友可以參考下2022-09-09