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?native?reanimated實(shí)現(xiàn)動(dòng)畫示例詳解
這篇文章主要為大家介紹了react?native?reanimated實(shí)現(xiàn)動(dòng)畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
我們組的前端妹子在組內(nèi)分享時(shí)談到了 react 的鉤子，趁此機(jī)會(huì)我也對(duì)我所理解的內(nèi)容進(jìn)行下總結(jié)，方便更多的同學(xué)了解。在 React 的 v16.8.0 版本里添加了 hooks 的這種新的 API，我們非常有必要了解下他的使用方法，并能夠結(jié)合我們的業(yè)務(wù)編寫幾個(gè)自定義的 hooks。2021-05-05
react?express實(shí)現(xiàn)webssh?demo解析
這篇文章主要為大家介紹了詳解react?express實(shí)現(xiàn)webssh?demo解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了React?在非組件環(huán)境切換路由的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-10-10
Webpack 4.x搭建react開發(fā)環(huán)境的方法步驟
這篇文章主要介紹了Webpack 4.x搭建react開發(fā)環(huán)境的方法步驟，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
解決React報(bào)錯(cuò)Property 'X' does not
這篇文章主要為大家介紹了解決React報(bào)錯(cuò)Property 'X' does not exist on type 'HTMLElement'，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
React 全自動(dòng)數(shù)據(jù)表格組件——BodeGrid的實(shí)現(xiàn)思路
表格是在后臺(tái)管理系統(tǒng)中用的最頻繁的組件之一，相關(guān)的功能有數(shù)據(jù)的新增和編輯、查詢、排序、分頁(yè)、自定義顯示以及一些操作按鈕。這篇文章主要介紹了React 全自動(dòng)數(shù)據(jù)表格組件——BodeGrid ,需要的朋友可以參考下2019-06-06
本篇文章主要介紹了關(guān)于react-router的幾種配置方式詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
為react組件庫(kù)添加typescript類型提示的方法
這篇文章主要介紹了為react組件庫(kù)添加typescript類型提示，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
關(guān)于useEffect執(zhí)行兩次的問(wèn)題及解決
這篇文章主要介紹了關(guān)于useEffect執(zhí)行兩次的問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09