xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

分类筛选优化

Browse Source
This commit is contained in:
czm 2022-04-15 13:50:38 +08:00
parent 9e969c496f
commit 8291ab49d7
8 changed files with 38 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/infiniteScroll/index.tsx
View File

@ -9,9 +9,9 @@ type Params = {
hasMore?: false|true,
children?: ReactNode,
lowerThresholdNum?: number,
paddingBottom?: number
}
export default memo(({styleObj, selfonScrollToLower, hasMore=true, children, lowerThresholdNum = 5}: Params) => {
export default memo(({styleObj, selfonScrollToLower, hasMore=true, children, lowerThresholdNum = 5, paddingBottom = 0}: Params) => {
const scrollToLower = () => {
selfonScrollToLower?.()
}
@ -24,15 +24,16 @@ export default memo(({styleObj, selfonScrollToLower, hasMore=true, children, low
onScrollToLower={() => scrollToLower()}
lowerThreshold={lowerThresholdNum}
>
<View>
<View style={{paddingBottom:paddingBottom + 'rpx'}}>
{children}
<View className={style.infinite_scroll}>
{
hasMore&&<View className={style.loading_more}>加载中<DotLoading/></View>||
<View>没有更多了</View>
}
</View>
</View>
<View className={style.infinite_scroll}>
{
hasMore&&<View className={style.loading_more}>加载中<DotLoading/></View>||
<View>没有更多了</View>
}
</View>
<View className="common_safe_area_y"></View>
</ScrollView>

3
src/components/shopCart/index.module.scss
View File

@ -40,7 +40,8 @@
}
}
.con{
padding:30px 20px 100px 0;
padding:30px;
padding-bottom: 0;
box-sizing: border-box;
flex:1;
height: 0;

9
src/components/shopCart/index.tsx
View File

@ -23,6 +23,7 @@ export default ({show = false, onClose}: param) => {
const [loading, setLoading] = useState(false)
useEffect(() => {
if(!show) return
let lists:any[] = []
for(let i = 0; i < 20; i++) {
lists = [...lists, {
@ -33,6 +34,12 @@ export default ({show = false, onClose}: param) => {
}]
}
setList([...lists])
}, [show])
useEffect(() => {
return () => {
setList([])
}
}, [])
const [showPopup, setShowPopup] = useState(false)
@ -104,7 +111,7 @@ export default ({show = false, onClose}: param) => {
</View>
<View className={styles.con}>
{loading&&<LoadingCard/>}
{!loading&&list.length > 0&&<InfiniteScroll selfonScrollToLower={() => {console.log('触底了')}}>
{!loading&&list.length > 0&&<InfiniteScroll selfonScrollToLower={() => {console.log('触底了')}} paddingBottom={100}>
<View className={styles.product_list}>
{list.map((item, index) => {
return <View key={index} className={styles.product_item}>

6
src/components/swiper/index.tsx
View File

@ -18,6 +18,12 @@ export default (props:params) => {
img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d',
url:'',
id:1
},
{
title:'数据',
img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d',
url:'',
id:2
}
]

7
src/pages/details/components/orderCount/index.tsx
View File

@ -30,6 +30,7 @@ export default memo(({show = false, onClose}: param) => {
console.log('执行执行')
useEffect(() => {
if(!show) return
let lists:any[] = []
for(let i = 0; i < 20; i++) {
lists = [...lists, {
@ -41,6 +42,12 @@ export default memo(({show = false, onClose}: param) => {
}]
}
setList([...lists])
}, [show])
useEffect(() => {
return () => {
setList([])
}
}, [])
const [showPopup, setShowPopup] = useState(false)

1
src/pages/details/components/swiper/index.module.scss
View File

@ -12,6 +12,7 @@
image{
width: 100%;
height: 100%;
display: block;
}
}
.page{

8
src/pages/details/components/swiper/index.tsx
View File

@ -21,11 +21,11 @@ export default ({list = []}: params) => {
return (
<View className={styles.swiper}>
<Swiper className={styles.swiper_item} circular={true} onChange={(e) => swiperChange(e)}>
{list.map(item => {
return <SwiperItem>
<Swiper className={styles.swiper_item} circular={true} onAnimationFinish={(e) => swiperChange(e)}>
{list.map((item) => {
return <SwiperItem key={item.id}>
<View className={styles.image_item} >
<Image src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d'></Image>
<Image mode="aspectFill" src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d'></Image>
</View>
</SwiperItem>
})}

1
src/pages/details/index.module.scss
View File

@ -78,7 +78,6 @@
.item_color{
width:210px;
height: 210px;
background-color: red;
border-radius: 20px;
image{
width: 100%;