当必须在页面上加载图像时，机车滚动不能与Vue.js一起工作

Question

我正在尝试实现Locomotive-Scroll.js，在我的页面上加载图像时有一个问题。滚动效果在没有图像的情况下有效，但在加载图像时会中断。我认为mounted函数会阻止滚动效果的加载，直到所有dom元素都加载完毕，所以我不知道从哪里开始。下面是我正在使用的JS：

<script>
import locomotiveScroll from "locomotive-scroll";
import $ from 'jquery'

export default {
  name: "locoScroll",
  props: {
    msg: String
  },
  data() {
    return {
      scrollIns: null,
  },
  mounted() {
    this.loadLanding();
    const _self = this;
    this.$nextTick(function() {
      _self.initLocoScroll(); 
    });
  },
  methods: {
    initLocoScroll() {
      const _self = this;
      this.scroll = new locomotiveScroll({
        el: _self.$refs['scrollSections'],
        smooth: true,
        smoothMobile: true,
        getDirection: true,
        initClass: true
      });
      this.scroll.update();
    },
      loadLanding: function () {
          //image & jobTitle fade in
          var elements = ['nav-links-top','rocks-image','job-title-container'];

          for (let i = 0; i < elements.length; i++) {
              var thisElement = $("." + elements[i]); //Get the current element based on class
              fadeInElement(thisElement, i);          //Call our "Fade in" function
          }
          function fadeInElement(elem, time) {      //Fade-in function that takes the element to fade-in, and the time it should wait
              setTimeout(function() {
                  elem.css('opacity', 1);
              }, 1650 * time + 500);                        //Set the time it should wait
          }
      },
  }
};

</script>

Answer 1

也许这会有帮助。我在Nuxt中使用Vuejs，我也有类似的问题。

您需要在加载dom之后触发火车头update()。

我使用graphql从api中拉入数据，这样我就有了动态数据，在火车头可以正确计算页面高度之前，我必须等待这些数据。

Graphql apollo有一个方便的加载参数，可以是true或false。

我的解决方案是创建一个提示，检查是否使用该参数加载了数据，然后触发locomotive.update()重新呈现页面高度。

mounted() {
    this.pageLoad();
  },

方法：

pageLoad() {
      return new Promise((resolve, reject) => {
        console.log("loading...");
        setInterval(() => {
          if (!this.$apollo.queries.projects.loading) {
            resolve("data fetched");
          }
        }, 100);
      })
        .then((res) => {
          console.log("loaded!", res);
          this.filteredProjects = this.projects.nodes;
          this.$refs.scroller.locomotive.update();
          this.$refs.scroller.locomotive.scroll.reinitScrollBar();
          console.log("loco updated");
        })
        .catch((err) => {
          console.error("error: ", err);
        });
    },

一旦您有权访问火车头实例，您就可以告诉它进行更新。

希望这能在某种程度上有所帮助。