vue-scroll滚动组件

安装方式：

可以在npm官网找到;连接

npm install vue-scroll --save

演示地址：

官方演示地址连接：点击这里

收获：

1. css计算属性calc();
2. vw,vh: 视图可见宽度和高度；
3. event.currentTarget；

项目实践：

这里是做个记录，留给我自己看，这个组件怎么用，建议去看上面的演示地址，直接复制很多变量没有，可能会报错。

<template>
  <div class="scroll_view">
    <div class="dashboard" @click="toTopC">
      scrollTop:{{ position.scrollTop }} ++ {{ positionProps }}
    </div>
    <div
      v-scroll:throttle="{ fn: onScroll, throttle: 500 }"
      class="translate_content"
      id="orderFullScreen"
      ref="scrollref"
      @click="toTopC"
    >
      <el-row
        class="scroll_content"
        v-for="(key, index) in dataListProps"
        :key="index"
      >
        <!-- 头像 -->
        <el-col :xs="3" :sm="2" :lg="1">
          <div class="speaker1"></div>
        </el-col>
        <!-- 文本 -->
        <el-col :span="20">
          <div class="timeClick">
            <div>
              <div class="td_user">
                &nbsp;&nbsp;
                <span class="speaker_text">
                  Role1
                </span>
                <span class="speaker_time">{{ key.startTime }}</span>
                &nbsp;<span
                  class="el-icon-circle-check check_icon_color"
                ></span>
              </div>
              <p class="audiot_style">
                &nbsp;&nbsp;
                <span>{{ key.content }}</span>
              </p>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row v-show="ssdataListProps[0]">
        <el-col :xs="3" :sm="2" :lg="1">
          <div class="speaker1"></div>
        </el-col>
        <el-col :span="20">
          <div>
            <div class="td_user">
              &nbsp;&nbsp;
              <span class="speaker_text">Role1</span>
              &nbsp;
              <span class="el-icon-loading loading_icon_color"></span>
            </div>
            <p class="audiot_style">&nbsp;&nbsp;{{ ssdataListProps[0] }}</p>
          </div>
        </el-col>
      </el-row>
      <div style="height:5rem; width:1px"></div>
    </div>
  </div>
</template>

<script>
var translate_content = document.getElementsByClassName("translate_content")[0];

export default {
  name: "scroll-view",
  //父组件穿过来的值
  props: ["dataListProps", "ssdataListProps", "positionProps"],
  data: function() {
    return {
      // orders,
      position: { scrollTop: 0, scrollLeft: 0 }
    };
  },
  methods: {
    onScroll: function(e, position) {
      console.log(e);

      console.log(position);
      this.position = position;
    },
    //可以通过event.currentTarget.scrollTop跳转到相应位置
    toTopC(e) {
      console.log(e.currentTarget.scrollTop);
      event.currentTarget.scrollTop = 10;
    }
  },
  watch: {
    positionProps(n, o) {
      console.log(n, o);
      // return scrollTo(0, n);
    }
  },
  updated() {
    console.table("up:" + this.positionProps);
  },
  mounted() {
    // window.addEventListener("scroll", this.showBackTop, true);
  }
};
</script>

<style lang="less" scoped>
.scroll_view {
  width: calc(100vw - 3.1rem);
  margin: 0.8rem 0.24rem 0;
  overflow-y: hidden;
  overflow-x: hidden;
  position: relative;
  max-height: calc(100vh - 1.5rem);
}

.dashboard {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  height: 12px;
  padding: 0 16px;
  line-height: 32px;
  color: #000;
  // background-color: #fff;
  text-align: left;
  z-index: 1;
}
.el-input__inner {
  font-size: 0.14rem;
}
.check_icon_color {
  color: #2185ff;
  font-size: 0.14rem;
}
.translate_content {
  background-color: #fff;
  width: calc(100vw - 3.55rem);
  max-height: calc(100vh - 2rem);
  padding: 0.8rem 0 2rem 0.6rem;
  overflow-y: auto;
  overflow-x: hidden;
  list-style: none;
  color: #2185ff;
  font-size: 0.18rem;

  font-size: 14px;
  .speaker1,
  .speaker2 {
    width: 0.44rem;
    height: 0.44rem;
  }
  .speaker1 {
    background: url("../assets/icon_role01_nor@2x.png") no-repeat center;
    background-size: 100%;
  }
  .speaker2 {
    background: url("../assets/icon_role02_nor@2x.png") no-repeat center;
    background-size: 100%;
  }
  .speaker_text {
    background-color: rgba(255, 255, 255, 0);
    font-size: 0.18rem; // font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: #333333;
  }
  .speaker_time {
    display: inline-block;
    margin-left: 0.2rem;
    font-size: 0.14rem;
    font-weight: bold;
    color: #999999;
  }
  .audiot_style {
    color: #333333;
    font-weight: 500;
    font-size: 0.18rem;
    font-family: PingFang-SC-Medium;
  }
}

.allfile {
  text-align: left; 
  background-color: #eceef2;
  width: 98%;
  height: 100%;
  .audiotext_style {
    color: #409eff !important;
  }
  tr td {
    text-align: left;
    background: #eee;
    height: 0.3rem;
    padding: 0.1rem;
  }

  .el-tag--info {
    background-color: rgba(255, 255, 255, 0);
  }
  .el-tag {
    color: #999;
    border: none !important;
    font-size: 0.14rem;
    font-weight: bold;
    color: #999999 !important;
  }
}

.el-switch {
  margin-top: 0.05rem;
}

.el-icon-d-arrow-left {
  background-color: rgba(200, 200, 200, 0);
}

.el-icon-d-arrow-right {
  background-color: rgba(200, 200, 200, 0);
}
@media screen and (max-width: 768px) {
  .scroll_view {
    overflow: hidden;
    width: 100%;
    margin: 0.8rem 0;
  }
  .translate_content {
    width: 100%;
    padding: 0.6rem 0.2rem;
  }
}
</style>