Tony/taro-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:: 下拉刷新功能示例

Browse Source
This commit is contained in:
Tony 2024-03-28 11:39:45 +08:00
parent 564f0fa177
commit cf8f4d72ad
1 changed files with 95 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/basePage/equipment/index.tsx
View File

@ -1,10 +1,16 @@
import { View } from "@tarojs/components"
import { useState } from "react"
import Taro from "@tarojs/taro"
import TabWrapper from "../../components/customized/tabWrapper"
import { ScrollView } from "@tarojs/components"
const EquipMent = () => {
const [selectedMenuId, setSelectedMenuId] = useState('all')
const topMenus = [
{
id: 'all',
title: '全部'
},
{
id: '1',
title: '基地1'
@ -30,29 +36,35 @@ const EquipMent = () => {
id: '3',
},
]
return (
<View className="p-1 h-full">
<View className="h-full flex flex-col">
<View className="flex px-2 py-1">
{
topMenus.map(item => {
return (
<View
className={`p-1 px-3 ${selectedMenuId === item.id ? 'border-b-4 border-lime-800' : ''}`}
key={item.id}
style={{ color: 'white' }}
onClick={() => setSelectedMenuId(item.id)}
>{ item.title }</View>
)
})
const [refreshTrigger, setRefreshTrigger] = useState(false)
const refreshFunc = (): Promise<void> => {
return new Promise((resolve, reject) => { resolve() })
}
</View>
<View className="h-full flex flex-col space-y-3 p-2 rounded-sm">
return (
<View className="px-1 h-full">
<View className="h-full flex flex-col justify-start">
<TabWrapper options={topMenus} selectedId={selectedMenuId} callback={setSelectedMenuId}></TabWrapper>
<View className="pb-2" style={{ height: 'calc(100% - 2.4rem)', width: '100%' }}>
<ScrollView
className="w-full h-full"
scrollY
scrollWithAnimation
refresherEnabled
scrollLeft={10}
refresherBackground="#00000000"
refresherTriggered={refreshTrigger}
onRefresherRefresh={() => {
console.log('触发下拉刷新');
setRefreshTrigger(true)
refreshFunc().then(() => setRefreshTrigger(false))
}}
>
{
dataList.map(item => {
return (
<View
className="px-4 py-2 rounded-md shadow-xl flex space-x-4 bg-white border border-slate-200 items-center"
className="px-4 py-2 m-2 w-[100% - 1rem] rounded-md shadow-xl flex space-x-4 bg-white border border-slate-200 items-center"
// onClick={() => {
// Taro.navigateTo({ url: '/pages/weatherStation/index?id=' + item.id })
// }}
@ -84,6 +96,7 @@ const EquipMent = () => {
)
})
}
</ScrollView>
</View>
</View>
</View>