98 lines
4.5 KiB
TypeScript
98 lines
4.5 KiB
TypeScript
import { ScrollView, Text, View } from "@tarojs/components"
|
|
import classnames from "classnames";
|
|
import Search from '@/components/search'
|
|
import Filter from "@/components/filter";
|
|
import InfiniteScroll from '@/components/infiniteScroll'
|
|
import SortBtn from "@/components/sortBtn";
|
|
import Tabs from "@/components/tabs";
|
|
import styles from './index.module.scss'
|
|
import { useCallback, useState } from "react";
|
|
|
|
export default () => {
|
|
const [showFilter, setShowFilter] = useState(false)
|
|
const [selectList, setSelectList] = useState([
|
|
{title: '系列', value:1},
|
|
{title: '系列', value:2},
|
|
{title: '系列', value:3},
|
|
{title: '系列', value:4},
|
|
{title: '系列', value:5},
|
|
{title: '系列', value:5},
|
|
{title: '系列', value:5},
|
|
{title: '系列', value:5},
|
|
{title: '系列', value:5},
|
|
])
|
|
const [scrollStatus, setScrollStatus] = useState(false)
|
|
const onscroll = useCallback((e) => {
|
|
if(e.detail.scrollTop > 20) {
|
|
setScrollStatus(true)
|
|
} else {
|
|
setScrollStatus(false)
|
|
}
|
|
},[])
|
|
return (
|
|
<View className={styles.main}>
|
|
<View className={styles.search}>
|
|
<Search placeIcon="out" btnStyle={{color: '#007AFF'}}/>
|
|
</View>
|
|
<View className={styles.filter}>
|
|
<View className={styles.filter_all}>
|
|
<View className={styles.text_zh}>
|
|
<Text>综合</Text>
|
|
<SortBtn status="top"/>
|
|
</View>
|
|
<View className={styles.text_sc} >
|
|
<Text>收藏</Text>
|
|
<SortBtn status="top"/>
|
|
</View>
|
|
<View className={styles.text_ss} >
|
|
<Text>高级搜索</Text>
|
|
<Text className={classnames('iconfont icon-sousuo', styles.miconfont)}></Text>
|
|
</View>
|
|
</View>
|
|
<View className={styles.filter_btn_con}>
|
|
<ScrollView scrollX className={styles.filter_scroll}>
|
|
<View className={styles.filter_btn}>
|
|
<View>系列</View>
|
|
<View>幅宽</View>
|
|
<View>克重</View>
|
|
<View>克重</View>
|
|
<View>克重</View>
|
|
<View className={styles.selected}>成分</View>
|
|
</View>
|
|
</ScrollView>
|
|
<View className={styles.filter_more} onClick={() => setShowFilter(true)}>
|
|
<Text>筛选</Text>
|
|
<Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
|
|
</View>
|
|
</View>
|
|
|
|
</View>
|
|
<View className={styles.list}>
|
|
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 (2条记录)</View>
|
|
<View className={styles.scroll}>
|
|
<InfiniteScroll
|
|
selfonScrollToLower={() => console.log('123123')}
|
|
selfOnScroll={(e) => onscroll(e)}
|
|
>
|
|
<View className={styles.product_list}>
|
|
{new Array(9).fill(' ').map(item => {
|
|
return <View className={styles.product_item}>
|
|
<View className={styles.product_img}></View>
|
|
<View className={styles.product_info}>
|
|
<View className={styles.title}>0770#21S精棉平纹</View>
|
|
<View className={styles.tag_list}>
|
|
<View className={styles.tag}>160cm</View>
|
|
<View className={styles.tag}>110g</View>
|
|
</View>
|
|
<View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
|
|
</View>
|
|
</View>
|
|
})}
|
|
</View>
|
|
</InfiniteScroll>
|
|
</View>
|
|
</View>
|
|
<Filter show={showFilter} onClose={() => setShowFilter(false)}/>
|
|
</View>
|
|
)
|
|
} |