1

我一直在努力将locomotive-scroll和Gsap实施到 Nuxt 项目中。我相信与 DOM 和 SSR 有关。我检查了从 scrollproxy Gsap 到 Nuxt 和机车的所有文档，但我没有更多的线索。

如果你们有任何建议，非常欢迎帮助。感谢您的时间。

这是错误

TypeError：无法读取未定义的属性“滚动”未
捕获类型错误：_triggers[_i].update 不是函数未捕获类型错误
：无法读取未定义的属性“匹配”

在 plugins/locomotive.js 中创建

import Vue from "vue";
import locomotiveScroll from "locomotive-scroll";

Object.defineProperty(Vue.prototype, "locomotiveScroll", {
  value: locomotiveScroll
});

在 nuxt.config.js 中配置

css: [
  //smooth scroll
  '@/assets/css/scroll.css',
],
plugins: [
  {
    src: "~/plugins/locomotive.js",
    mode: "client"
  }
],

在 app.vue 中添加

<script>
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);
import LocomotiveScroll from "locomotive-scroll"
</script>

在 app.vue 的挂载钩子中触发

this.locoScroll = new LocomotiveScroll({
  el: document.querySelector('.smooth-scroll'),
  smooth: true,
})

this.locoScroll.on('scroll', ScrollTrigger.update)

ScrollTrigger.scrollerProxy('.smooth-scroll', {
  scrollTop(value) {
    return arguments.length
      ? this.locoScroll.scrollTo(value, 0, 0)
      : this.locoScroll.scroll.instance.scroll.y
  },
  getBoundingClientRect() {
    return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight }
  },
  pinType: document.querySelector('.smooth-scroll').style.transform ? 'transform' : 'fixed',
})

ScrollTrigger.addEventListener('refresh', () => this.locoScroll.update())
ScrollTrigger.refresh()
4

2 回答 2

0

您好朋友，滚动触发器中的“this”引用了自身，因此您需要将 locomotivescroll 放在变量中以在没有“this”的情况下使用。就我而言，我通过了参数！

export default {
    data() {
        return {
            locoScroll: {},
        }
    },
    mounted() {
        this.locoScroll = new this.locomotiveScroll({ el: document.querySelector('#js-scroll'), smooth: true })
        window.addEventListener('resize', _.debounce(this.onlocoScrollResize, 100))

        this.locoScroll.scrollTo(0, 0, 0)

        this.$nextTick(() => {
            setTimeout(() => {
                const sections = document.querySelectorAll('section[data-scroll-11section]')
                this.resizeSectionsObserver(sections)
                this.locoScroll.update()
            }, 500)
        })

        let el = document.querySelector('#js-scroll')
        this.smooth(this.locoScroll, el)
    },

    methods: {
        smooth(scroll, el) {
            gsap.registerPlugin(ScrollTrigger)

            scroll.on('scroll', ScrollTrigger.update)

            ScrollTrigger.scrollerProxy(el, {
                scrollTop(value) {
                    return arguments.length ? scroll.scrollTo(value, 0, 0) : +scroll.scroll.instance.scroll.y.toFixed(4)
                },
                getBoundingClientRect() {
                    return {
                        top: 0,
                        left: 0,
                        width: window.innerWidth,
                        height: window.innerHeight,
                    }
                },
                pinType: el.style.transform ? 'transform' : 'fixed',
            })
            ScrollTrigger.defaults({ scroller: el })
            ScrollTrigger.addEventListener('refresh', () => scroll.update())
            ScrollTrigger.refresh()
        },
        onlocoScrollResize() {
            this.locoScroll.update()
        },
        resizeSectionsObserver(elements) {
            const resizeCallback = () => {
                this.locoScroll.update()
            }
            const observer = new ResizeObserver(resizeCallback)
            elements.forEach(el => {
                observer.observe(el)
            })
        }
    },
    destroyed() {
        this.locoScroll.destroy()
        window.removeEventListener('resize', this.onlocoScrollResize)
    },
}

我在 Nuxt 应用程序中使用这个代码片段我有一个问题，因为它只适用于第一次调用！

于 2021-06-23T18:50:02.293 回答
0

尝试一次专注于一个问题：

  • 你对 GSAP 有什么不满？你试过这个nuxt-gsap模块吗？在我这边工作超级棒。ScrollTrigger在那里可用。
  • 我不确定你为什么要使用app.vuelocomotive -scroll，但你可能应该简单地尝试最基本的用例，page或者component在默认布局 IMO 中将其插入最大。然后，您可能会考虑对其进行优化。

如果您实现了正确安装 GSAP 并且正在苦苦挣扎locomotive-scroll，您可以在 Codesandbox 上创建一个托管示例。但是如果你不想太费心，你可能会寻找一些 Vuejs视差包，如果 GSAP 不够，你可能会找到适合你的东西。

于 2021-03-01T14:36:56.107 回答