学习
实践
活动
专区
工具
TVP
写文章

【交互探讨】无限滚动还是分页展示,这是个问题!

你天生设计直觉一开始可能会告诉你要忠于老式分页。然而,在您意识到之前,您可能会想无限滚动是否是一个不错选择,因为您拥有非常独特用例。那么无限滚动真的是个好主意吗? 毫无疑问,作为设计师,我们倾向于其他选择:分页和“加载更多”按钮。 分页和“加载更多” 我们可以通过使用分页,来避免无限滚动所产生问题。 不幸是,在可用性测试中,有时分页效果并不好。分页能够让用户感知到未来内容数量,并且易于管理,但与无限滚动相比,效率也下降了许多。 与无限滚动相比,它们查看项目的总数更少,并且参与度较低。 如果我们既想保留分页好处,同时还想避免无限滚动给用户带来不堪重负,我们可以使用“加载更多”模式来代替。 提供以后继续浏览选项。 考虑使用“加载更多”+无限滚动一起。 考虑使用分页+无限滚动一起。 在加载新项目时更改URL,并将其公开给用户。 允许用户跳转到带有分页下拉列表任何页面。

39620

摸鱼新发现,滚动无限滚动

在一次调试过程中,我按下了F12刚好是掘金页面,然后把代码输入到控制台之后,顺手滚动了几下右侧滚动条,发现个问题如下图所示: ? ‍‍‍‍‍‍‍‍‍‍ ElementClass extends Vue {} interface IntrinsicElements { [elem: string]: any } } } Element-ui 无限滚动 首先需要获取滚动位置,即可视区高度和内容区域底部距离可视区页面顶部距离,如果他们相等此时浏览器滚动条当好滚动到页面底部,如果相差是负数说明浏览器滚动条还没有到达页面底部。 ? ,我们就可以触发我们自己需求去调用接口等 优化页面 这里想法是当我们浏览器滚动滚动之后,滚动上去内容不显示在页面上,只显示可视区域,减少页面的负载,先看一下效果 ? 其实无限滚动也简单,就是能不能想到这个点子上,如果想不到那肯定就是天方夜谭了,这里面也有很多不足地方需要改进,欢迎留言探讨和指点,毕竟这里水很深,不小心鞋就湿了。

88440
  • 广告
    关闭

    有奖征文丨玩转 Cloud Studio

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    优雅处理网络数据,你真的会吗?不如看看这篇.

    (Cache)和获取图像,来使你 App 具有更高响应速度 无限滚动,无缝加载 提到列表分页,相信大家第一个想到就是 MJRefresh,用于上拉下拉来刷新数据,当滚动数据到达底部时候向服务器发送请求 首先,我先和大家介绍一个概念:无限滚动无限滚动是可以让用户连续加载内容,而无需分页。在 UI 初始化时候 App 会加载一些初始数据,然后当用户滚动快要到达显示内容底部时加载更多数据。 那关于无限滚动该如何实现呢!其实这个无限滚动并不是真正意义上永无止尽,严格意义上来讲它是有尽头,只不过这个功能背后数据是不可估量,只有大量数据做支持才能让应用一直不断从服务端获取数据。 回到我上面所说无限滚动, 其实实现起来并不难,正常情况下,我们向服务端请求大量相同类型数据时候,都会提供一个接口,我称之为分页请求接口,该接口在每次数据返回时候,都会告诉客户端总共有多少页数据, 无限滚动和对数据无缝加载效果,你学会了吗?

    25620

    让Typecho无限滚动加载方法

    据统计,据媒体报道,据各种经验之谈:用户不喜欢点击,更爱滚动!所以,之前挺流行文章分页没有了,沿用了几百年“下一页”也被无限load取代。瀑布流和Twitter更是推动了无限load普及。 这里介绍一个jQuery插件:Infinite AJAX Scroll,通过这个插件能快速实现无限滚动翻页。因为是jQuery所以到处都能用,这里我们以Typecho作为例子。 >"></script> 第二步为Typecho加上分页 如果看官网文档的话,它会告诉你分页代码用带有数字列表pageNav(); ?>。 jQuery.ias({ container: '#posts', //大容器 item: '.post', //循环容器 pagination: '#pagination', //分页容器 pagination是分页所在容器,就是包裹分页按钮divid或者class next是下一页对应class,就是分页按钮超链接class 如果没有id或者class,就自己加一个。

    17620

    Vue组件滚动加载、懒加载功能实现,无限滚动加载组件实例演示

    效果图如下: 可以看到随着不断滚动,页面组件数量不断加载。 其实加载是后端返回数据,因为涉及隐私,没有给显示出来。 利用懒加载,可以防止大量渲染造成卡顿降低用户体验。 当滚动距离 + 可视区高度 >= 滚动条长度时,就相当于滚动到了底部。 // 当前可视区高度 var clientHeight = document.documentElement.clientHeight // 滚动长度 var scrollHeight = document.documentElement.scrollHeight // 当滚动距离+可视区高度>=滚动条长度时, = document.documentElement.scrollHeight // 当滚动距离+可视区高度>=滚动条长度时,就相当于滚动到了底部 if (scrollTop

    50840

    一个快速 Vue3 无限滚动组件

    无限滚动组件是在用户向下滚动页面时加载新内容,而不是将其分成多个页面。 它们对于特定类型内容(例如用户生成内容)非常有效。 以下是无限滚动示例。 在今天教程中,我们将使用 Composition API 创建一个 Vue3 无限滚动组件。这是我们将在它结束时构建内容预览。 如你所见,它是无限滚动,屏幕右侧滚动条反映了这一点。 现在,让我们一起来看看这个组件实现过程。 为什么还要使用无限滚动组件? 我们都见过使用无限滚动来显示其内容网站示例,但是什么时候使用它,它效果会比使用典型分页系统更好呢? 你可以阅读我之前分享一篇文章《无限滚动分页哪个用户体验更好?如何正确使用它们》,在这里,我只简单总结一下它们有缺点。 无限滚动优点: 用户参与和内容发现 滚动比点击更好(更好可用性) 滚动适用于移动设备 无限滚动缺点: 页面性能和设备资源 项目搜索和位置 - 用户无法为页面添加书签并保留位置 不相关滚动条 就像所有与

    39620

    一款支持百万量级无限滚动组件

    或许有小伙伴说:用分页呀,每次只展示有限数据,需要更多时候点击下一页呀 分页确实是一种解决方案,但是却不是最好体验方式。 无限滚动就是解决这种场景更好技术手段 而今天就是给大家分享一款可以承受百万量级数据无限滚动组件vue3-infinite-list vue3-infinite-list vue3-infinite-list 是一个针对vue3短小精悍无限滚动组件,它体积非常小、零依赖gzip只有 3kb。 '; 用无限滚动组件标签包裹待滚动数据列表 <InfiniteList :data="data" :width="'100%'" :height="500" :itemSize (默认) 设置滚动方向为水平方向 动态控制滚动高度(每一项item高度值是变化滚动到指定元素位置(可以设置对齐方式) 支持动态变更数据 设置额外渲染元素数量 github: https://github.com

    8520

    iOS开发常用之网络

    HBHorizo​​ntalTableView - swift,TableView横向滚动小示例(仿照AppStore应用展示)。 它使用基于ViewController容器特性(而不是滚动视图)来管理各个子页面,以支持无限分页,源码推荐说明。 横向展示文本内容自定义cell - 可以横向展示文本内容自定义cell,根据文本无限滚动。 仿LOL滚动视图 - 仿LOL滚动视图。 答案选择切换页 - 将scrollview和tableview封装在一起,在初始时候简单将数据带上,就可以一页一页左右来回滑动。 用于简化实现各种类型旋转木马(分页滚动视图),无限轮播,iOS开发之多图片无缝滚动组件封装与使用。 KIPageView - 无限循环PageView,横向TableView无限轮播。

    1.9K10

    React-Native iOS 列表(ListView)优化方案

    它可以改善长列表滚动性能,默认值为true. 这对于大ListViews来说是一个非常重要。在Android, overflow值通常为hidden. 第二种方法里面,能够比较好解决屏幕外 cell 内存问题,但是和 native tableview 相比,并没有 native cell 重用机制完美,那么,我们可以讲 native tableview TableView 中去。 当我们在进行列表展示时候,如果数据量不是特别的庞大(不是无限滚动),且界面比较复杂时候,方案1能够比较好解决性能问题,而且操作起来比较简单,只需要对 listview 一些属性进行基本设置。 当我们需要展示很多数据时候(不是无限滚动),我们可以使用方案2,对那些超出屏幕外部分,对他进行组件最小化 当我们需要展示大量数据(可以无限滚动),我们可以通过方案3/4,来达到重用目的

    57420

    手把手带你撸一个网易云音乐首页(三)

    我们知道在 UICollectionView 属性中,有一个分页属性:isPagingEnabled,当设置成 true 时,每次滚动位移量等于它自身 frame 宽度;当不设置这个分页属性,它默认值是 false, 所以它滚动就不会有分页效果。 image 有人要问那是不是 UICollectionView 这个控件就只能按照屏幕大小来分页呢!答案当然是否定。我们还可以用自定义方式来实现分页滚动。 ,决定了 UICollectionView 停止滚动偏移量,可以通过重写这个函数来实现自定义分页滚动,重写这个函数逻辑思路如下: 定义一个坐标点 CGPoint 来记录最新滚动偏移坐标 定义俩个值分别为 记录了滚动目标位移坐标,通过这个坐标和记录上次滚动坐标可以判断出是向左滚动还是向右滚动 如果俩坐标的水平方向相减绝对值大于某个固定值(譬如说 item 宽度 8 分之一),则可以判断发生了分页

    49610

    IOS开发基础知识建议收藏

    setToolbarHidden:NO];   [self.navigationController setNavigationBarHidden:NO];   } 6.UITableView游标式渲染   tableView 有这样机制就是说无论你table里数据有多少,都可以全部放入table中不用分页,因为不用一次性把所有数据都取出来,只在需要显示时候根据游标去取对应数据就行了。    曾尝试webview嵌在tableview里,为了让webview跟tableview一起滚动,把webview大小设为webview里内容大小,让webview不出滚动条,从而能跟着tableview 滚动条一起滚。 解决办法是让webview定住高度为一整屏iphone高度,限制了webview每次渲染范围为可视范围,性能大好。带来问题是无法随tableview滚动,但可以以其他方式优化体验。

    21020

    基于 Vue.js 移动端组件库mint-ui实现无限滚动加载更多

    通过多次爬坑,发现了这些监听滚动来加载更多组件共同点, 因为这些加载更多方法是绑定在需要加载更多内容元素上, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表函数 已全部加载完成"; this.loadingComplete=true; this.loading = false; } }, 这里重要是判断 ,当当前页面为0时候,即第一页时候,不需要setTimeout定时器,直接请求加载,当加载更多时候可以加个定时器。 网上找到很多mint-ui loadmore组件来实现上拉加载更多,由于上拉触发相应加载更多事件,所以当进入页面的时候应该不会自动载入数据,则这里可以加一个获取第一页数据函数。

    1.6K50

    实际开发中多线程简单使用场景

    -->用放大数倍数据源方式(比如50倍),使用collectionView 良好复用性,实现广告图片无限轮播。 ? 正常执行顺序 正常执行顺序-->viewWillAppear(or viewDidLoad) --> tableView Delegate ---- 使用主队列异步-->实现数据源先执行,在执行viewWillAppear 主队列异步执行--执行顺序改变 如图,我们会发现,tableView Delegate方法,竟然走在了viewWillAppear 方法前面! 用这种方法,我们可以先设置tableView cellcount,再在viewWillAppear中实现滚动,可以完美实现 --> 广告图片无限轮播效果~ ---- 如图有小白想知道,如何用collectionView 实现图片无限滚动,我到时候简单讲解一下实现原理,开源下简单功能代码。

    3K60

    AsyncDisplayKit 2.0 教程:入门「译」

    image.png 真是一个流畅 tableView!一旦你开始做了,那就让我们做更好吧! 无限滚动 在大多数应用中,服务器数据点个数往往会多于当前 tableView 中显示单元格数量。 因为你希望无限滚动,那就返回 YES,以确保总是请求新数据。 Build and Run,并且不停滚呀滚。你将会看到不停看到一只鸟,他们是无限。 通常,该范围前侧大于后侧。当用户改变其滚动方向时,范围大小也是相反,以便于对应用户实际移动方向。 Node接口状态回调 你可能会疑惑:这些 Ranges 是如何正确工作? 假设你有一个竖直滚动tableView,在其中某些Cell包含了水平滚动 collectionView。

    66620

    六天完成一个简单iOS App - 第四天

    titleView也是添加在主控制器上,显示在scrollView上面,保证titleView永远显示在主控制器View上,不会随着scrollView滚动滚动。 didEndScrollingAnimation 一定要调用[setcontentoffset animated ]或者 [scrollerRactVisible animaated]方法让scroll产生滚动动画 endRefreshing]; MJRefresh内部实现思路,在tableView中titleView上方添加下拉刷新View,使用scrollView代理方法监听tableViewcontentOffset 常见分页情况 发送page参数 : page = 2 加载第二页数据,每一页几条,当获取下一页时,如果有新数据添加到最前面,就会发生数据重复显示。 maxid请求第2页数据为 == @[15, 14, 13, 12, 11]。 当然两种分页方法影响并不大,要根据服务器返回数据,确定分页请求方法。

    72370

    扫码关注腾讯云开发者

    领取腾讯云代金券