✨ feat(码单抬头列表开发完成):
This commit is contained in:
@@ -94,7 +94,7 @@ const Search = (
|
||||
></Input>
|
||||
{!!inputCon && (
|
||||
<View className={styles.search_closeBtn}>
|
||||
<CloseBtn onClose={() => clearInput()} styleObj={{ width: '20rpx', height: '20rpx', backgroundColor: '#fff', border: '0' }} />
|
||||
<CloseBtn onClose={() => clearInput()} styleObj={{ width: '20rpx', height: '20rpx', border: '0' }} />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
@@ -0,0 +1,24 @@
|
||||
.select_list {
|
||||
display: flex;
|
||||
background-color: #fff;
|
||||
font-size: 32px;
|
||||
font-weight: 500;
|
||||
.select_list_item {
|
||||
height: 96px;
|
||||
text-align: center;
|
||||
line-height: 96px;
|
||||
flex: 1;
|
||||
text {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
.select_list_ed {
|
||||
text {
|
||||
border-bottom: 6px solid #337fff;
|
||||
}
|
||||
color: #4581ff;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
import { Text, View } from '@tarojs/components'
|
||||
import classNames from 'classnames'
|
||||
import { memo, useCallback, useEffect, useState } from 'react'
|
||||
import styles from './index.module.scss'
|
||||
|
||||
interface ItemIndex {
|
||||
value: number
|
||||
label: string
|
||||
}
|
||||
interface Param {
|
||||
defaultIndex?: number
|
||||
onSelect?: (val: number) => void
|
||||
list: ItemIndex[]
|
||||
}
|
||||
export default memo((props: Param) => {
|
||||
const { defaultIndex = 1, onSelect, list = [] } = props
|
||||
const [selectIndex, setSelectIndex] = useState(0)
|
||||
useEffect(() => {
|
||||
if (defaultIndex != selectIndex) { setSelectIndex(() => defaultIndex) }
|
||||
}, [defaultIndex])
|
||||
const getSelect = useCallback((index) => {
|
||||
setSelectIndex(() => index)
|
||||
onSelect?.(index)
|
||||
}, [])
|
||||
return <View className={styles.select_list} >
|
||||
{list?.map((item) => {
|
||||
return <View key={item.value} onClick={() => getSelect(item.value)} className={classNames(styles.select_list_item, selectIndex === item.value && styles.select_list_ed)}><Text>{item.label}</Text></View>
|
||||
})}
|
||||
</View>
|
||||
})
|
||||
Reference in New Issue
Block a user