Question

我有一个带有进度条的模态，应该在滚动时显示进度。

当我第一次打开它时，它不起作用，只有当我关闭并再次打开模态时，它才起作用。如何在第一时间解决此问题？我尝试了不同的生命周期挂钩，但是没有一个起作用。

<template>
 <div ref="progressbar"> .....</div>
</template>

<script>
methods: {
   chceckScrollBar () {
      const element = this.$refs.progressbar
      const clientHeight = element.clientHeight
      const scrollHeight = element.scrollHeight
      const scrollTop = element.scrollTop
      const res = (scrollTop / (scrollHeight - clientHeight)) * 100
      if (scrollHeight <= clientHeight) {
        this.percentage = 100
      } else {
        this.percentage = res.toFixed(2)
      }
   }
}


 created() {
    this.$refs.progressbar.addEventListener('scroll', this.chceckScrollBar )
  },
  beforeDestroy () {
    this.$refs.progressbar.removeEventListener('scroll',this.chceckScrollBar )
  }
</script>

Answer 1

您将需要将事件监听器放入已挂载的方法中，因为在创建的引用中尚不存在引用

mounted() {
    this.$refs.progressbar.addEventListener('scroll', this.chceckScrollBar )
}

Answer 2

是的，您应该使用mounted方法来添加滚动事件侦听器。示例on codepen。但是问题在于添加js事件监听器 不是一种可行的方法 。您需要在元素上使用v-on:scroll="chceckScrollBar"。为什么？ on:scroll总是在用户滚动元素时被调用。

模板

<div id="app-vue">
   <template>
     {{percentage}}
     <div class="modal" ref="progressbar"> Hello 
       <br>
         ....
       <br></div>
  </template> 
</div>

Css

.modal {
  width:200px;
  max-height:300px;
  overflow-y: scroll;
  background-color:green;
}

Vue

let vm = new Vue({
  data() {
    return {
      percentage:0,
    };
  },
  methods: {
   chceckScrollBar () {
      const element = this.$refs.progressbar
      const clientHeight = element.clientHeight
      const scrollHeight = element.scrollHeight
      const scrollTop = element.scrollTop
      const res = (scrollTop / (scrollHeight - clientHeight)) * 100
      if (scrollHeight <= clientHeight) {
        this.percentage = 100
      } else {
        this.percentage = res.toFixed(2)
      }
   }
},

 mounted() {
    this.$refs.progressbar.addEventListener('scroll', this.chceckScrollBar );
  },
  beforeDestroy () {
    this.$refs.progressbar.removeEventListener('scroll',this.chceckScrollBar );
  },
  el: '#app-vue'
})

如何在Vuejs中的模态作品上制作滚动条？

2 个答案: