代码之家  ›  专栏  ›  技术社区  ›  BT101

每5秒垂直滚动一次

  •  0
  • BT101  · 技术社区  · 7 年前

    我正在尝试创建垂直滚动动画。

    我在div中有9个元素,其中隐藏了溢出和高度,您当时只能看到3个。

    每隔5秒钟我只想把它们加上负号 margin-top 和更改 orderStep 变量所以,如果orderStep等于1,那么当它为1时,我向所有元素添加边距0 margin-top: -190px; 当它是2时,我加上-380px。

    我有一个函数在 methods 对象,然后我执行它 created 从后端获取记录后。

    不幸的是,它不起作用,我的代码是:

         data() {
             return {
                 articles: [],
                 errors: [],
                 step: 1
             }
         },
         methods: {
            changeSlide() {
                const elements = document.querySelectorAll('.most__popular');
                setInterval(() => {
                    switch (this.step) {
                        case 1:
                            for(let val of elements) {
                                val.style.margin = "10px 0";
                            }
                            this.step = 2;
                            break;
                        case 2:
                            for(let val of elements) {
                                val.style.margin = "-190px 0 0 0";
                            }
                            this.step = 3;
                            break;
                        case 3:
                            for(let val of elements) {
                                val.style.margin = "-380px 0 0 0";
                            }
                            this.step = 1;
                            break;
                    }
                },5000);
            }
        },
        async created() {
            try {
                const response = await axios.get(`/api/article/getMostPopular.php`, axiosConfig);
                this.articles = response.data.records;
                this.changeSlide();
            } catch (e) {
                this.errors.push(e)
            }
        },
    

    它根本不会改变我元素的风格。在firefox控制台中,我没有任何错误。

    步骤变量的初始值为1,如中所示 data() (我在编辑中添加了它)。


    编辑

    我做了更多的调试,我发现 document.querySelectorAll 没有给我正确的节点列表,它是空的。这可能是因为我指的是使用 v-for 来自异步后端调用( response 从…起 created() )但我想我可以在我的 axios.get ,如何修复?


    编辑2

    现在,正如RoyJ在注释部分建议的那样(可能是因为我不应该在vue使用其虚拟DOM时操纵DOM),我正在绑定样式 :style 模板中的指令

            <div class="most__popular"
                 v-for="n in articles" :key="n.id"
                 :style="{margin: sliderMargin}">
    

    因此,我将margin设置为sliderMargin变量,该变量在函数中发生变化:

    changeSlide() {
        setInterval(() => {
            switch (this.step) {
                case 1:
                    console.log('step1');
                    this.sliderMargin = '10px 0 0 0';
                    this.step = 2;
                    break;
                case 2:
                    console.log('step2');
                    this.sliderMargin = '-190px 0 0 0';
                    this.step = 3;
                    break;
                case 3:
                    console.log('step3');
                    this.sliderMargin = '-190px 0 0 0';
                    this.step = 1;
                    break;
            }
        },5000);
    }
    

    但它并没有像我所希望的那样工作,因为它为每个元素添加了边距,所以结果它并没有滚动,而是消失了。所以我要做的是:

    • 在第一步中,所有元素都有边距顶部:10px
    • 在第二步中,1、2、3个元素的页边距为顶部:-190px,其余元素的页边距为10px
    • 在第三步中,1、2、3、4、5、6个元素具有边距顶部:-190px其余元素具有10px

    问题是如何调整 :样式 仅适用于前三种情况,如果 this.step 等于2或6,如果 这步 等于3或无,如果 这步 等于1?

    1 回复  |  直到 7 年前
        1
  •  1
  •   Roy J    7 年前

    setInterval ,您不打算测试 this.step ,只需更新其值。它使用模运算来循环0、1、2的值。

    您将进行计算,根据每篇文章的索引(0-5)和 这步 . 所以 sliderMargin 是一个数组,其中的每个元素对应一个元素 articles . 在 v-for ,元素来自 滑块边缘 对应于 article 已使用。

    thresholds 指示给定步骤中有多少文章的边距为10px,而有多少文章的边距为-190px。

    new Vue({
      el: '#app',
      data: {
        articles: [1,2,3,4,5,6],
        step: 0
      },
      computed: {
        sliderMargin() {
          const thresholds = [0, 3, 6];
    
          return this.articles.map((_, i) =>
            `${(i < thresholds[this.step]) ? '10px' : '-190px'} 0 0 0`
          );
        }
      },
      mounted() {
        setInterval(() => {
          this.step = (this.step + 1) % 3;
        }, 5000);
      }
    });
    <script src="//unpkg.com/vue@latest/dist/vue.js"></script>
    <div id="app">
      <div class="most__popular" v-for="n, i in articles" :key="n.id" :style="{margin: sliderMargin[i]}">
        {{n}}
      </div>
    </div>