RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
  
// 通过这个函数可以动态设置元素宽高.
const getItemSize = (i: number): number => {
      switch (i % 4) {
        case 1:
          return 80;
        case 2:
          return 50;
        case 3:
          return 100;
        default:
          return 200;
      }
  };

这里 getItemSize 是一个有如下语法的函数 : (i: number): number, 通过这个函数可以动态设置元素宽高。

4.滚动到指定元素位置 demo

  
 item{{ index + 1 }} : {{ item }}
  

你也可以使用 scrollToIndex 来滚动到指定元素。

5.滚动到指定元素 (更精细的对齐方式) demo

 
   
      item{{ index + 1 }} : {{ item }}
   
 

你可以使用 scrollToIndexscrollToAlignment 属性来指定滚动元素如何与滚动区域对齐, 由四个选项: auto, start, center, end,分别对应自动对齐、位于容器起始,位于容器中间,位于容器末尾。

6.滚动到指定位置,单位是像素 demo

  
    
      index: {{ index + 1 }} 
      xxxxxxxxxx
      
        Primary 
        Success
    
  

你也可以使用 scrollOffset 来滚动到指定位置。

7.支持动态变更数据 demo

  
 
   item{{ index + 1 }}
   2022-05-01
   Name: Tom
   
     Button
     Button
   
 
  

只需要动态的改变绑定的 data.

8.设置额外渲染元素的数量 demo


  {{ index + 1 }} : {{ item }}
在可见的item上/下再各多渲染额外的overscanCount个item。调整它可以帮助减少某些浏览器/设备上的滚动闪烁。

vue3无限滚动组件怎么用

组件的属性和配置

属性类型是否必须?描述
widthNumber or String*列表宽度. 在滚动方向是 'horizontal'是用于确定滚动元素个数.
heightNumber or String*列表宽度. 在滚动方向是 'vertical'是用于确定滚动元素个数.
dataany[]构建滚动元素的数据
itemSize(index: number): number
可以是一个固定的宽/高(取决于滚动方向), 一个包含列表所有元素的数组, 或者是返回指定位置元素高度的函数: (index: number): number
scrollDirectionString
指定滚动方向 'vertical' (默认) 或 'horizontal'.
scrollOffsetNumber
可以指定滚动位置
scrollToIndexNumber
可以指定到滚动到哪个元素
scrollToAlignmentString
结合 scrollToIndex一起用, 用于控制滚动到的元素的对齐方式. 可选: 'start', 'center', 'end' or 'auto'. 使用 'start' 将对齐到容器的起始位置, 'end' 则对齐到元素的结尾. 使用 'center可以对齐到容器正中间. 'auto' 则是滚动到scrollToIndex指定元素恰好完全可见的位置
overscanCountNumber
在可见元素上/下额外渲染的元素数量. 这可以减少在特定浏览器/设备上的闪烁
width 在 scrollDirection'vertical'时只能是string类型。类似的, Height 在 scrollDirection'horizontal'时也只能是string类型*

以上就是关于“vue3无限滚动组件怎么用”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


网页题目:vue3无限滚动组件怎么用
网页网址:http://xdwzjz.cn/article/gcsgdi.html
Top