vue3无限滚动

1.cmd输入

npm install vue3-seamless-scroll --save

yarn add vue3-seamless-scroll

2.main.ts文件加入

import vue3SeamlessScroll from "vue3-seamless-scroll";

app.use(vue3SeamlessScroll);

3.代码示例

<vue3-seamless-scroll
  hover-stop="true"
  :list="dataList"
  hover="true"
  step="0.5"
  class="scroll"
>
  <ul>
    <li
      v-for="(item, index) in dataList"
      :key="index"
    >
      <span class="optionsId">{{ item.wzId }}</span>
      <span class="optionsName">{{ item.websiteName }}</span>
      <span class="optionsValue">{{ item.dataNum }}</span>
    </li>
  </ul>
</vue3-seamless-scroll>


const dataList: any = ref([])

表格滚动:

表格暂无数据不显示

:deep(.el-table__empty-block){
  display: none !important;
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue自动无限滚动列表可以通过监听`scroll`事件和`offsetHeight`、`scrollTop`和`scrollHeight`属性的变化,来动态加载新数据。 具体思路如下: 1. 在列表容器上添加`scroll`事件监听。 2. 监听到滚动事件后,判断当前滚动位置是否已经接近底部(例如,滚动位置到达列表高度的80%),如果接近底部,则加载新的数据。 3. 在加载新数据时,将新数据添加到列表的末尾,并更新列表容器的高度。 下面是一个简单的实现例子: ```html <template> <div ref="listContainer" class="list-container" @scroll="handleScroll"> <div v-for="(item, index) in items" :key="index">{{ item }}</div> <div v-if="loading" class="loading">Loading...</div> </div> </template> <script> export default { data() { return { items: [], loading: false, page: 1, pageSize: 10 }; }, mounted() { this.loadData(); }, methods: { handleScroll() { const container = this.$refs.listContainer; const { offsetHeight, scrollTop, scrollHeight } = container; const threshold = offsetHeight * 0.8; if (scrollTop + threshold > scrollHeight && !this.loading) { this.loadData(); } }, async loadData() { this.loading = true; const data = await this.fetchData(this.page, this.pageSize); this.items = [...this.items, ...data]; this.page++; this.loading = false; // 更新列表容器的高度,确保滚动能够继续触发加载新数据的逻辑 this.$nextTick(() => { const container = this.$refs.listContainer; container.style.height = `${container.scrollHeight}px`; }); }, fetchData(page, pageSize) { // 异步获取新数据的逻辑 // 返回一个Promise对象,resolve时返回新的数据 } } }; </script> ``` 在这个例子中,我们定义了`handleScroll`函数来处理滚动事件。在函数中,我们通过`this.$refs.listContainer`访问到列表容器,并获取到`offsetHeight`、`scrollTop`和`scrollHeight`属性的值。然后,我们判断当前滚动位置是否已经接近底部(接近底部的阈值为列表高度的80%),如果接近底部并且没有正在加载数据,则调用`loadData`方法加载新的数据。 在`loadData`方法中,我们首先将`loading`属性设置为`true`,表示正在加载数据。然后,我们调用`fetchData`方法异步获取新数据,并将新数据添加到列表的末尾。接着,我们更新`page`属性的值,表示已经加载了一页数据。最后,我们将`loading`属性设置为`false`,表示数据加载完成。 在加载新数据时,我们还需要更新列表容器的高度,确保滚动能够继续触发加载新数据的逻辑。这里我们使用了`this.$nextTick`方法,在DOM更新后再执行更新高度的逻辑。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值