我使用 next 13 ，我想在我的应用程序中添加 AOS 库并使用它，我安装了它，并将其正确添加到我的组件中，但我的组件没有显示，也没有收到任何错误。这是我的主页页面代码：
import Hero from "../components/index/Hero"
import ItSolutions from "@/components/index/ItSolutions"
import Skills from "@/components/index/Skills"
import Script from "next/script"
import AOS from 'aos';
import 'aos/dist/aos.css';
const getData = async (type) => {
const projectId = 'q8l0xi0c'
const dataset = 'production'
const query = encodeURIComponent(`*[_type == "${type}"]`)
const url = `https://${projectId}.api.sanity.io/v2021-10-21/data/query/${dataset}?
query=${query}`
const response = await fetch(url)
const data = (await response.json()).result
return data
}
const Home = async () => {
<Script>
AOS.init();
</Script>
const members = await getData('member')
const blogs = await getData('blog')
const customers = await getData('customer')
const solutions = await getData('solution')
return (
<div>
<Hero />
<ItSolutions solutions={solutions} />
<Skills />
</div>
)
} 导出默认主页
我将此 div 用于另一个名为 Skills 的组件来应用 AOS ：
<div className="max-w-screen-xl mt-28 pt-36 px-4 pb-28 sm:px-16 md:px-8 lg:grid lg:grid-cols-2
lg:gap-20 lg:mt-16 xl:px-20 xl:mx-auto " data-aos="fade-up"> HI There
</div>
这是我为了让它发挥作用所做的事情。我创建了一个新文件aos.tsx并将其添加到其中
"use client"
import { useEffect } from 'react'
import AOS from "aos";
import "aos/dist/aos.css";
export const AOSInit = () => {
useEffect(() => {
AOS.init({
easing: 'ease-out-quad',
duration: 1000,
});
}, [])
return null
}
为了使用它，我导入了AOSInit我的根layout.tsx文件
import { AOSInit } from './aos'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<AOSInit />
<body>
<main className="overflow-x-clip">
...
<div className="flex-1">{children}</div>
...
</main>
</body>
</html>
)
}
| 归档时间： |
|
| 查看次数： |
2866 次 |
| 最近记录： |