eric/gitlab-instance-0a899031_nomadcna
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'新增动画和图片懒加载'

Browse Source
This commit is contained in:
hackrobot
2024-10-05 12:04:18 +08:00
parent e47554a8c7
commit 750b2b58ef
5 changed files with 51 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@@ -1,4 +1,4 @@
# dist/
dist/
deploy_versions/
.temp/
.rn_temp/

1
package.json
View File

@@ -51,6 +51,7 @@
"raw-loader": "^4.0.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-lazy-load-image-component": "^1.6.2",
"sr-sdk-h5": "^1.3.1",
"taro-ui": "^3.2.0"
},

36
src/pages/index/index.jsx
View File

@@ -59,6 +59,9 @@ import wechatGroup from "../../images/wechatGroup.jpg";
import IndexDetail from "./componments/IndexDetail/index";
import { LazyLoadImage } from "react-lazy-load-image-component";
import "react-lazy-load-image-component/src/effects/blur.css";
// export default class Index extends Component {
const Index = () => {
const [current, setcurrent] = useState(0);
@@ -72,12 +75,19 @@ const Index = () => {
const weGroup = () => {
return (
<View className="weGroup">
{" "}
<Image
{/* <Image
style="width: 100%;height: 100%;"
// mode="heightFix"
src={wechatGroup}
/>
/> */}
<LazyLoadImage
alt="Sample"
src={wechatGroup}
effect="blur"
width="100%"
height="100%"
/>
</View>
);
};
@@ -86,11 +96,18 @@ const Index = () => {
const weBook = () => {
return (
<View className="weBook">
<Image
{/* <Image
style="width: 100%;height: 100%;"
// mode="heightFix"
src={nomadBook}
/>
/> */}
<LazyLoadImage
alt="Sample"
src={nomadBook}
effect="blur"
width="100%"
height="100%"
/>
</View>
);
};
@@ -223,10 +240,17 @@ const Index = () => {
<View className="itemDownright">¥1545/月</View>
</View>
{/* 0;opacity: 0.93; */}
<Image
{/* <Image
style="width: 100%;height: 100%;background: #fff;border-radius: 5%;z-index:0;filter: contrast(0.9);"
// mode="heightFix"
src={item.img}
/> */}
<LazyLoadImage
alt="Sample"
src={item.img}
effect="blur"
width="100%"
height="100%"
/>
</View>
);

5
src/pages/index/index.scss
View File

@@ -29,6 +29,11 @@
// padding-right: 10px;
// background-color: aqua;
.item:hover {
animation: pulse 0.6s ease;
}
.item {
flex-grow: 1; /* 自动增长填充空间 */
flex-basis: 260px; /* 基本宽度为 300px，元素数量随可用空间调整 */

20
yarn.lock
View File

@@ -8110,17 +8110,17 @@ lodash.merge@^4.6.2:
resolved "https://registry.npmmirror.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
lodash.throttle@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
integrity sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==
lodash.uniq@^4.5.0:
version "4.5.0"
resolved "https://registry.npmmirror.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
integrity sha512-xfBaXQd9ryd9dlSDvnvI0lvxfLJlYAZzXomUYzLKtUeOQvOP5piqAWuGtrhWeqaXK9hhoM/iyJc5AV+XfsX3HQ==
"lodash@4.6.1 || ^4.16.1", lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.4:
version "4.17.21"
resolved "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
lodash@^4.17.21:
"lodash@4.6.1 || ^4.16.1", lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.17.4:
version "4.17.21"
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -10182,6 +10182,14 @@ react-is@^17.0.1:
resolved "https://registry.npmmirror.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
react-lazy-load-image-component@^1.6.2:
version "1.6.2"
resolved "https://registry.yarnpkg.com/react-lazy-load-image-component/-/react-lazy-load-image-component-1.6.2.tgz#af1773e4d66519ad6b3c2015290c23b5de97c81b"
integrity sha512-dAdH5PsRgvDMlHC7QpZRA9oRzEZl1kPFwowmR9Mt0IUUhxk2wwq43PB6Ffwv84HFYuPmsxDUCka0E9KVXi8roQ==
dependencies:
lodash.debounce "^4.0.8"
lodash.throttle "^4.1.1"
react-native-animatable@1.3.3:
version "1.3.3"
resolved "https://registry.yarnpkg.com/react-native-animatable/-/react-native-animatable-1.3.3.tgz#a13a4af8258e3bb14d0a9d839917e9bb9274ec8a"