react-native flatlist 上拉載入onEndReached方法頻繁觸發的問題

-Advertisement-

問題在寫flatlist復用組件時，調用的時候如果父組件是不定高的組件，會造成組件無法顯示如果父組件樣式{flex：1}，則會出現下拉方法頻繁觸發或不正常觸發的問題（我這裡出現的問題是在列表第6個項目在底部時，緩慢上拉會多次觸發flatlist的onEndReached監聽）原因推測是因為{ ...

問題

在寫flatlist復用組件時，調用的時候如果父組件是不定高的組件，會造成組件無法顯示

如果父組件樣式{flex：1}，則會出現下拉方法頻繁觸發或不正常觸發的問題（我這裡出現的問題是在列表第6個項目在底部時，緩慢上拉會多次觸發flatlist的onEndReached監聽）

原因

推測是因為{flex：1}不適合做動態高度組件的父組件樣式，會錯誤的判斷高度導致onEndReached多次不正常觸發。

解決

可以把列表上方所需的組件做成header屬性傳入組件當做flatlist的頭部組件，這樣就可以直接調用封裝好的組件。

也可以把父元素的樣式設成{height: '100%'}，這樣就可以正確的觸發onEndReached監聽。

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

jQuery中有關each方法的使用

概述： each() 方法規定為每個匹配元素規定運行的函數。返回 false 可用於及早停止迴圈,相當於break。返回 true 可以結束本次迴圈，相當於continue。語法: $(selector).each(function(index,element){ }) index - 選擇器 ...
【Vue 2.x】指令的學習

v-on作用於事件，簡寫@ v-bind作用於html元素的屬性，簡寫: v-for作用於模板內的變數，和C#的foreach類似的用法 v-if和v-show條件渲染html元素 v-model作用於有value值的元素，例如input（text、radio、checkbox）、select表單、 ...
函數的自執行，變數提升和函數提升

其實之前雖然剛開始學習JavaScript的時候經常看到function add(){}、var add=function(){}、function(){}之類的這種寫法，但是具體是什麼叫什麼卻沒有去考慮過這個問題…… function add(){}這種寫法叫做函數聲明 var add=funct ...
mui scrollTo到指定位置,出現空白頁及拉不動的問題解決

使用方式簡介 mui 列表頁使用的是 mui的插件實現的上拉載入下拉刷新，但是從詳情頁回到列表頁時不能回到之前的位置。所以想到了使用緩存。第一次和第二次的試驗是失敗的。失敗後，就想用其他辦法來解決這個問題。所以試驗了WeUi+mui，WeUI+listloading.js 以及純WeUi。發現 ...
Vue.js學習筆記--4. 組件的基本使用

整理自官網教程 -- https://cn.vuejs.org/ 1. 所有Vue組件同時也都是Vue實例，分為全局組件和局部組件，註冊方式如下。註意： a. 如<ul>、<table>和<li>、<tr>等父子元素有限制的元素，不能直接使用組件模板，可由is屬性來指定，如<tr is="my-r ...
Bootstrap常用組件

導航欄： 1 <nav class="navbar navbar-inverse navbar-fixed-top"> 2 <div class="container-fluid"> 3 <div class="navbar-header"> 4 <button type="button" clas ...
Dom屬性方法

一、javascript的三大核心 1.ECMAScript js的語法標準 2.DOM Document object Model 文檔對象模型，提供的方法可以讓js操作html標簽 3.BOM Browser Object Model 瀏覽器對象模型，提供的方法讓js可以操作瀏覽器註意：1. ...
Promise，我們來實戰

Promise的基礎我就不說了，我更加關心的是Promise能帶給我什麼便利？這也是本文的內容所在。 Promise.all 併發執行多個非同步方法，統一返回結果，結果按照參數的順序返回。上面的這個方法能夠很好的看出Promise.all的執行方式，Promise.all的作用是顯而易見的，比如我的 ...