使用flatlist實現下拉重新整理列表資料的傳輸問題

2021-09-18 04:52:20 字數 1711 閱讀 5641

1,flatlist元件:

this.renderitem(item)}  //渲染承載data資料的背景樣式

refreshcontrol=}

/>

}/>

2,其中onrefresh是當下拉的時候,發生的事件,呼叫函式去獲取後台資料;

3,data是flatlist資料列表即將呈現的資料,這裡初始化:

constructor(),,,

]4,主要內容是,如何從後台將資料傳到前台

//將資料庫中某個欄位的值全部拼接到一起成為乙個字串

$string=' ';

while($row = mysqli_fetch_array($result,mysqli_assoc))

$result=["name"=>$string];        //  得到json形式的陣列:[ "name"=>"123,2434,v,dfg,325,fga" ]

$json_result=json_encode($result);    //將json形式的陣列編碼為json格式的資料傳送給前端;

echo  $json_result;

5,前端react native獲取json格式的資料並解析:

將得到的[ "name"=>"123,2434,v,dfg,325,fga"]轉化為:[    , ..........]

fetch(url,options).then((resoponse)=>response.json()).then((result)=>;

php中只能: 

$a="bob";  

$array=[   "name"=>$a  ];

$json_array=json_encode($array);

echo $json_array;

b.在react native中,a函式呼叫b函式,在b函式中,this已經不指向元件了,這個時候的this無法呼叫state,因此,要想在b函式中呼叫state,需要先在a函式中儲存this,var  that=this; 即可;

7,flatlist不僅要接收資料庫中的資料,還要能夠左側滑動顯示刪除按鈕,以此刪除資料。

react-native-swipe-list-view   react-native-swipeout(推薦)這兩個元件可以用來實現滑動刪除。

(

)}renderright=) => ( //當swipeable屬於react-native-swipeable-flat-list時呼叫

//必須將view和text都設定寬高,才會顯示

刪除)}

/* renderquickactions= //當swipeableflatlist屬於react-native時呼叫

maxswipedistance=

*/initialnumtorender= //最初可以展示的資料數量

listheadercomponent= //listheadercomponent

itemseparatorcomponent= //itemsepatatorcomponent

listfootercomponent=

backgroundcolor= //整個swipeableflatlist的背景色

refreshcontrol=}

/>

}/>

js php實現下拉分頁

js 起始頁數,每頁顯示資料已經在後台寫死 var curpage 1 window on scroll function post flfg postdata,function response datastr datastr response i title datastr time datas...

實現下拉滾動載入

下拉滾動載入 首先,如果你本身需要滾動載入的塊是隱藏的,那麼就等他顯示在監聽滾動事件,否則直接在mounted裡面監聽就可以了 定義監聽事件 const sealpopover document.queryselector choose seal content.seal box sealpopov...

css實現下拉列表

為什麼要用下拉列表,因為有動態效果而且可看可不看的,我認為使用下拉列表對我們的頁面有美化作用。怎麼實現?首先思路就是使用display屬性來進行控制,這是網頁設計非常重要的屬性之一。關於display屬性,我們應該要知道它具體的屬性值和作用。因為屬性值較多,我列舉常用的幾個屬性 屬性值作用 none...