vue关于scroll,轮播滚动

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>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue3-seamless-scroll是一个基于Vue3的无缝滚动组件库,可以用于创建无限滚动轮播等效果的滚动视图。如果您想监听vue3-seamless-scroll滚动事件,可以通过以下步骤实现: 1. 在组件中引入vue3-seamless-scroll,并添加需要滚动的内容和相关配置: ```html <template> <div class="scroll"> <vue3-seamless-scroll :options="options"> <ul> <li v-for="(item, index) in list" :key="index">{{ item }}</li> </ul> </vue3-seamless-scroll> </div> </template> <script> import Vue3SeamlessScroll from 'vue3-seamless-scroll' export default { components: { Vue3SeamlessScroll }, data() { return { list: ['item1', 'item2', 'item3'], options: { step: 1, limitMoveNum: 1, direction: 'horizontal' } } } } </script> ``` 2. 在组件中使用ref来获取vue3-seamless-scroll组件的实例,并在mounted生命周期中注册滚动事件监听器: ```html <template> <div class="scroll"> <vue3-seamless-scroll ref="scroll" :options="options"> <ul> <li v-for="(item, index) in list" :key="index">{{ item }}</li> </ul> </vue3-seamless-scroll> </div> </template> <script> import Vue3SeamlessScroll from 'vue3-seamless-scroll' export default { components: { Vue3SeamlessScroll }, data() { return { list: ['item1', 'item2', 'item3'], options: { step: 1, limitMoveNum: 1, direction: 'horizontal' } } }, mounted() { const scroll = this.$refs.scroll.$refs.scroll scroll.addEventListener('scroll', this.handleScroll) }, methods: { handleScroll() { console.log('scrolling...') } } } </script> ``` 在上述代码中,我们使用$refs来获取vue3-seamless-scroll组件的实例,并使用addEventListener方法在mounted生命周期中注册了滚动事件监听器handleScroll
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

sea_lichee

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值