博客

vue关于scroll，轮播滚动

滚动请求下页数据

<!--
 * @Author: lxiang
 * @Date: 2022-03-11 00:34:57
 * @LastEditTime: 2022-03-11 01:09:06
 * @LastEditors: lxiang
 * @Description: 滚动请求下页数据
 * @FilePath: \demons\src\views\pagescroll.vue
-->
<template>
  <div class="box">
    <div
      id="Scroll"
      class="InfoBox"
      @mouseover="mouseover"
      @mouseout="mouseout"
    >
      <div v-for="(item, index) in dataList" :key="index" class="item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    let dom = document.getElementById("Scroll");
    dom.addEventListener("scroll", this.handleScroll);
  },
  beforeDestroy() {
    let dom = document.getElementById("Scroll");
    dom.addEventListener("scroll", this.handleScroll);
  },
  data() {
    return {
      dataList: [1, 2, 4, 5, 6, 7, 8, 9, 10],
      currentPage: 0,
      totalPage: 4,
    };
  },
  methods: {
    handleScroll() {
      let dom = document.getElementById("Scroll");
      const scrollDistance =
        dom.scrollHeight - dom.scrollTop - dom.clientHeight;
      if (scrollDistance <= 0) {
        if (this.currentPage < this.totalPage - 1) {
          this.currentPage++;
          document.getElementById("Scroll").scrollTop =
            document.getElementById("Scroll").scrollTop - 10;
          this.dataList.push(111);
          console.log(
            "请求第",
            this.currentPage,
            "页数据",
            "现在显示条数",
            this.dataList
          );
        } else {
          console.log("没有更多");
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  margin: 20px;
  height: 300px;
  background: aqua;
  text-align: center;
  .InfoBox {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    overflow: auto;
    background: rgb(95, 241, 198);
    .item {
      margin-top: 30px;
      padding: 10px;
      background: rgba(250, 79, 221, 0.637);
      text-align: center;
      cursor: pointer;
    }
  }
  .InfoBox::-webkit-scrollbar {
    -webkit-appearance: none;
  }
  .InfoBox::-webkit-scrollbar:vertical {
    width: 10px;
  }
  .InfoBox::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white;
    background: rgba(99, 98, 99, 0.452);
  }
}
</style>

消息滚动

<!--
 * @Author: lxiang
 * @Date: 2022-03-10 23:08:45
 * @LastEditTime: 2022-03-11 01:03:20
 * @LastEditors: lxiang
 * @Description: 消息滚动
 * @FilePath: \demons\src\views\inforscroll.vue
-->
<template>
  <div class="news">
    <div id="roll" class="InfoBox" @mouseover="this.mouseOver" @mouseout="this.mouseOut">
      <div v-for="item in 25" :key="item" class="item">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    var area = document.getElementById("roll");
    area.innerHTML += area.innerHTML;
    this.area = area;
    setInterval(this.scroll, 100);
  },
  data() {
    return {
      area: {},
      stop: false,
    };
  },
  methods: {
    scroll() {
      if (!this.stop) {
        if (this.area.scrollTop >= this.area.scrollHeight / 2) {
          this.area.scrollTop = 0;
        } else {
          this.area.scrollTop++;
        }
      }
    },
    mouseOver() {
      this.stop = true;
    },
    mouseOut() {
      this.stop = false;
    },
  },
};
</script>
<style lang="less" scoped>
.news {
  margin: 20px;
  height: 300px;
  background: aqua;
  text-align: center;
  .InfoBox {
    width: 300px;
    height: 300px;
    margin: 0 auto;
    overflow: hidden;
    background: rgb(94, 163, 233);
    .item {
      margin-top: 30px;
      padding: 10px;
      background: rgb(54, 230, 83);
      text-align: center;
      cursor: pointer;
    }
  }
}
</style>