【无标题】VUE任意区块自动滚动组件

野生卡尔

已于 2023-04-19 14:40:02 修改

阅读量157

点赞数 1

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端 html

于 2023-04-19 13:44:16 首次发布

本文链接：https://blog.youkuaiyun.com/Net_connect/article/details/130242140

文章展示了一个使用Vue.js编写的自动滚动组件，该组件通过接收外层高度、内容高度、滚动速度和唯一名称等参数，实现内容的平滑滚动效果。同时，组件包含开关以控制滚动状态，并处理滚动冲突。CSS动画用于内容的向上滚动效果，且支持暂停功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不废话了都在代码里

还有很多待优化的点，现在能用就先不改了

//引入该组件 将需要滚动的内容包裹在内 传入必要的参数 即可自动滚动
<!--组件说明信息-->
<!--入参：outerHeight(视界高度)-->
<!--入参：contentHeight(内容offset高度)-->
<!--入参：scrollSpeed(内容滚动速度-px/s)-->
<!--入参：name(必填 不可重复 否则造成滚动冲突)-->
<!--入参：type(是否贴顶/多数情况下不填)-->
<template>
  <div ref="cc1" :style="'height:'+ outerHeight + 'px;'" :class="isScroll? 'outer1':'outer'">
    <div class="text" :style="'position: absolute;line-height: 25px;z-index:99;top:' + (type==='top'?'-34px;':'14px;')+'left:'+(type==='top'?'0;':'25px;')">
        <el-switch v-model="isScroll" @click="!isScroll">
        </el-switch>
        <span>自动滚动开关</span>
    </div>
    <div ref="scrollC" id="scrollC1"  :class="isScroll ? ('rowup' + name) : ''">
      <slot>
        加载失败<br>
        参数：
        {{this.outerHeight+'px'}}
        {{scrollSpeed+'px/s'}}
        {{'name:'+name}}
      </slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'dialogMainDivName',
  mixins: [],
  props: {
    outerHeight: {
      type: String,
      default: '400'
    },
    contentHeight: {
      type: Number,
      default: 400
    },
    scrollSpeed: {
      type: String,
      default: '100'
    },
    name: {
      type: String,
      default: '400' + this.contentHeight
    },
    type:{
      type: String,
      default: 'inner'
    }
  },
  components: {},
  data() {
    return {
      list:{},
      isScroll:true
    };
  },
  created() {

  },
  watch:{
    isScroll(val){
      if (val) {
        this.$nextTick(()=>{
          console.log(this.$refs.cc1);
          this.$refs.cc1.scrollTo(0,0);
          this.$refs.cc1.className='outer1';
        })
      }else{
        this.$refs.cc1.className='outer';
      }
    }
  },
  mounted() {
      this.$nextTick(()=>{
        this.scrolllControl();
      })
  },
  methods: {
  //添加滚动事件
    scrolllControl(){
      this.$nextTick(()=>{
        this.list = this.$refs['scrollC'];
        let offeset = Math.abs(this.contentHeight - this.outerHeight);
        console.warn('组件发来回电：',this.contentHeight,this.outerHeight);
        if(offeset===0 || offeset < 0){
          return
        }
        let style = document.createElement('style');
        style.type = 'text/css';
        style.id = this.name;
        const time= parseInt(offeset/Number(this.scrollSpeed));
        let keyFrames='\
          @-webkit-keyframes rowup'+ this.name +' {\
              0% {\
                  -webkit-transform: translate3d(0, 0, 0);\
                  transform: translate3d(0, 0, 0);\
              }\
              100% {\
                  -webkit-transform: translate3d(0, -'+offeset+'px, 0);\
                  transform: translate3d(0, -'+offeset+'px, 0);\
              }\
          }\
          @keyframes rowup'+ this.name +' {\
              0% {\
                  -webkit-transform: translate3d(0, 0, 0);\
                  transform: translate3d(0, 0, 0);\
              }\
              100% {\
                  -webkit-transform: translate3d(0, -'+offeset+'px, 0);\
                  transform: translate3d(0, -'+offeset+'px, 0);\
              }\
          }\
          .rowup'+ this.name +'{\
            -webkit-animation: '+time+'s rowup'+ this.name +' linear infinite normal;\
            animation: '+time+'s rowup'+ this.name +' linear infinite normal;\
            position: relative;\
          }\
          .rowup' + this.name + ':hover{\
            animation-play-state:paused;\
          }';
        style.innerHTML = keyFrames;

        console.warn('组件打印',this.contentHeight,offeset)
        document.getElementsByTagName('body')[0].appendChild(style);
      })

    }
  },
  scrollcontent(){
    style.remove(this.name);
    this.scrolllControl();
  },
}
</script>

<style lang="scss" scoped>
.outer{
  width: 100%;
  overflow-y: auto;
}
.outer1{
  width: 100%;
  overflow-y: hidden;
}
.text{
  span{
    visibility: hidden;
  }
}
.text:hover {
  span{
    visibility: inherit;
  }
}
</style>