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

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

@ -1,93 +1,106 @@
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: '1',
title: '基地1'
},
{
id: '2',
title: '基地2'
},
{
id: '3',
title: '基地3'
},
]
const [selectedMenuId, setSelectedMenuId] = useState('all')
const topMenus = [
{
id: 'all',
title: '全部'
},
{
id: '1',
title: '基地1'
},
{
id: '2',
title: '基地2'
},
{
id: '3',
title: '基地3'
},
]
const dataList = [
{
id: '1',
},
{
id: '2',
},
{
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>
)
})
}
</View>
<View className="h-full flex flex-col space-y-3 p-2 rounded-sm">
{
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"
// onClick={() => {
// Taro.navigateTo({ url: '/pages/weatherStation/index?id=' + item.id })
// }}
>
{/* <View className="w-12 h-12 relative top-1">
const dataList = [
{
id: '1',
},
{
id: '2',
},
{
id: '3',
},
]
const [refreshTrigger, setRefreshTrigger] = useState(false)
const refreshFunc = (): Promise<void> => {
return new Promise((resolve, reject) => { resolve() })
}
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 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 })
// }}
>
{/* <View className="w-12 h-12 relative top-1">
<Image src={img} className="w-12 h-12"></Image>
</View> */}
<View className="w-full flex flex-col justify-between items-start pb-1">
<View className="text-lg pb-1">气象站</View>
<View className="w-full flex items-center space-x-8">
<View className="flex items-center space-x-2">
<View>已巡检</View>
<View style={{ color: 'green' }}>3</View>
</View>
<View className="flex items-center space-x-2">
<View>未巡检</View>
<View style={{ color: 'red' }}>3</View>
</View>
</View>
</View>
<View
className="rounded-xl w-20 bg-green-500 text-center py-1"
style={{ color: 'white' }}
onClick={() => {
Taro.navigateTo({ url: '/inspectionManager/inspection/index?id=' + item.id})
}}
>去巡检</View>
</View>
)
})
}
</View>
</View>
</View>
)
<View className="w-full flex flex-col justify-between items-start pb-1">
<View className="text-lg pb-1">气象站</View>
<View className="w-full flex items-center space-x-8">
<View className="flex items-center space-x-2">
<View>已巡检</View>
<View style={{ color: 'green' }}>3</View>
</View>
<View className="flex items-center space-x-2">
<View>未巡检</View>
<View style={{ color: 'red' }}>3</View>
</View>
</View>
</View>
<View
className="rounded-xl w-20 bg-green-500 text-center py-1"
style={{ color: 'white' }}
onClick={() => {
Taro.navigateTo({ url: '/inspectionManager/inspection/index?id=' + item.id })
}}
>去巡检</View>
</View>
)
})
}
</ScrollView>
</View>
</View>
</View>
)
}
export default EquipMent;