0

我有一个带有v-rellax指令的元素，用于在此 div 中启用视差滚动：

<div id="image" v-rellax="{ speed: -5 }"></div>

现在我需要更改speed属性以-3使其适应不同的screen width. 有没有办法改变speed：

1. in a `media query`
2. in `vue.js`
3. in `javascript`

有没有一种简单的方法可以做到这一点vue？

编辑：

我已经尝试实施提供的解决方案，但视差滚动停止工作。我做错了吗？

<script>
export default {
  name: "home",
  data: { rellax_speed: -5 },
  created() {
    window.addEventListener('resize', (event) => {
      if (event.target.innerWidth >= 576) {
        this.rellax_speed = -3;
        return;
      }
      this.rellax_speed = -5;
    })
  }
}
</script>

模板：

<div id="image" v-rellax="{ speed: rellax_speed }"></div>

编辑2：

<script>
export default {
  name: "home",
  data() {
    return {
      r_speed: -5
    }
  },
  methods: {
    onresize(event) {
      if (event.target.innerWidth >= 576) {
        this.r_speed = -3;
        return;
      }
      this.r_speed = -5
    }
  },
  created() {
    window.addEventListener("resize", this.onresize)
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onresize, true)
  }
}
</script>

模板：

<div id="image" v-rellax="{ speed: r_speed }"></div>
4

1 回答 1

1

好的，相信能理解你。

编辑：

谢谢你 tony19 :)

在数据中创建 vrelaxSpeed。初始值：-5，在你的指令中使用它。

data() {
   return { 
      vrellaxSpeed: -5
   }
},
methods:{
   onResize(event) {
      if (event.target.innerWidth > 1280) {
        this.vrellaxSpeed = -3;
        return;
      }
      this.vrellaxSpeed = -5;
   }
},
created() {
   window.addEventListener('resize', this.onResize)
},
beforeDestroy() {
   window.removeEventListener('resize', this.onResize, true);
}

在你的 Vue 组件中创建一个计算。

computed: {
   getVrellaxSpeed() {
      return window.innerWidth > 1280 ? -3 : -5;
   }
}

然后，在你的指令道具中使用它。

<div id="image" v-rellax="{ speed: getVrellaxSpeed }"></div>

我没有测试它，请试试这个并给我反馈以帮助你:)

于 2021-08-21T15:22:28.700 回答