Question

所以我试图通过使用数据对象定位背景位置来创建视差效果。

<div class="parallaxBanner" :style="{scrollBanner}">
</div>

<script>
    export default {
        data: function(){
            return{
                scrollBanner: 0,
            }
        },
        methods:{
            scrollPosition: function(){
                this.scrollbanner = window.scrollY % 0.5;
                console.log(window.scrollY);
            }
        },
        mounted() {
          window.addEventListener('scroll', this.scrollPosition);
        }
    }
</script>

不是100％如何在行值中定位CSS，任何建议都会有很大帮助：）

Answer 1

如果要设置background-position，可以使用

<div class="parallaxBanner" :style="{ backgroundPosition: scrollBanner }">
</div>

Answer 2

您可以直接在样式中分配方法，并在计算机中编写一种方法：

HTML

<Row>
  <i-col :span="5" :style="styles" class="sidebar">
    <f-sidebar></f-sidebar>
  </i-col>
</Row>

脚本

computed: {
  styles () {
    return {
      style.position = 'fixed'
      style['z-index'] = '99'
      style.height = '100%'
      style.background = '#363e4f'
    }
  }
}

如何使用数据对象转换成样式标签？ Vuejs

2 个答案: