优化收益加载速度

v2
king 1 year ago
parent 76b08de3c1
commit 8e465b9d03
  1. 55
      src/pages/home/components/adware.tsx
  2. 6
      src/pages/home/components/feature_recommended.tsx
  3. 8
      src/pages/home/home.tsx

@ -15,7 +15,6 @@ const Adware: FC<Props> = ({data, only_flag, width}) => {
const [adverts, setAdverts] = useState<AdwareType[]>([])
const [space, setSpace] = useState<any | null>(null)
useEffect(() => {
const res = data.find(d => d.only_flag === only_flag)
setSpace(res)
@ -31,36 +30,40 @@ const Adware: FC<Props> = ({data, only_flag, width}) => {
}
return (
<View className={styles.adware}>
{
adverts.length === 1 && <Img
src={adverts[0].image_url}
mode='scaleToFill'
lazyLoad
fadeIn
onClick={() => jumpAdware(adverts[0].image_path)}
width={width}
height={(space.height / space.width) * width}/>
}
<>
{
adverts.length > 1 && <Swiper
indicatorDots
autoplay
circular
style={{width: width + "rpx", height: (space.height / space.width) * width + "rpx", overflow: 'hidden'}}
indicatorActiveColor='rgba(255,255,255,0.5)'>
{adverts.map(d => <SwiperItem key={d.id}>
<Img
src={d.image_url}
adverts.length > 0 && <View className={styles.adware}>
{
adverts.length === 1 && <Img
src={adverts[0].image_url}
mode='scaleToFill'
lazyLoad
fadeIn
onClick={() => jumpAdware(adverts[0].image_path)}
width={width}
height={(space.height / space.width) * width}
onClick={() => jumpAdware(d.image_path)}/>
</SwiperItem>)}
</Swiper>
height={(space.height / space.width) * width}/>
}
{
adverts.length > 1 && <Swiper
indicatorDots
autoplay
circular
style={{width: width + "rpx", height: (space.height / space.width) * width + "rpx", overflow: 'hidden'}}
indicatorActiveColor='rgba(255,255,255,0.5)'>
{adverts.map(d => <SwiperItem key={d.id}>
<Img
src={d.image_url}
lazyLoad
fadeIn
width={width}
height={(space.height / space.width) * width}
onClick={() => jumpAdware(d.image_path)}/>
</SwiperItem>)}
</Swiper>
}
</View>
}
</View>
</>
)
}

@ -151,7 +151,7 @@ const FeatureRecommended: FC<Props> = (props) => {
return (
<View className={styles.feature} style={{height: '263px'}}>
{data.every(d => d.data.length) && <Swiper nextMargin='30px' style={{height: '263px'}}>
<Swiper nextMargin='30px' style={{height: '263px'}}>
{
data.map(d => <SwiperItem key={d.url}>
<Image
@ -159,7 +159,7 @@ const FeatureRecommended: FC<Props> = (props) => {
className={styles.featureTitle}
onClick={() => jump(d.url)} src={d.titleUrl}/>
{
d.data.map((c, index) => <View
d.data.length > 0 && d.data.map((c, index) => <View
className='flex mb-3'
key={c.id}
onClick={() => jump(d.detailsUrl + c.path, c.id, d.type)}>
@ -177,7 +177,7 @@ const FeatureRecommended: FC<Props> = (props) => {
}
</SwiperItem>)
}
</Swiper>}
</Swiper>
</View>
)
}

@ -1,4 +1,4 @@
import {FC, useEffect, useState} from "react";
import {FC, useState} from "react";
import {View} from "@tarojs/components";
import styles from "./home.module.scss";
import Adware from "@/pages/home/components/adware";
@ -20,11 +20,11 @@ const Home: FC = () => {
Taro.navigateTo({url: '/pages/login/login'})
}
useEffect(() => {
Taro.useLoad(() => {
HomeApi.home().then(res => {
setData(res)
})
}, [])
})
return (
<View className={styles.content}>
@ -37,7 +37,7 @@ const Home: FC = () => {
skill={data?.skill || []}
/>
<Adware data={data?.adverts || []} only_flag='routine_home_recommend_banner' width={710}/>
<CurRecommended/>
{data && <CurRecommended/>}
{
!token && <View className={styles.tipsLogin} onClick={unLogin}>
<View>~</View>

Loading…
Cancel
Save