首页 新闻 搜索 专区 学院

鼠标向下滚动,继续加载下一页的列表

0
悬赏园豆:20 [待解决问题]

我用C#+asp.net开发网站。用Repeater显示课程列表,每个ItemTemplate里放有一张图片,一行简介,一个单击事件,绑定后每行显示3个课程清单,大概有50行共150个课程清单,单击图片会播放课程视频,观看完成后会保存相应的学员观看记录。现在要实现,如何让鼠标向下滚动时,每次只显示大概10行的课程清单,当鼠标再往下滚动时,再加载接下来的10行课程清单,依次类推,直至50行课程清单加载完毕。目前,我是一次性加载所有的课程列表出来,所以显示速度会很慢.本人还是菜鸟级,能否提供具体的实现代码?

liusijie的主页 liusijie | 初学一级 | 园豆:184
提问于:2021-11-08 15:57
< >
分享
所有回答(6)
0

这跟什么asp.net无关。。。如果我没记错,这东西应该是叫“瀑布流”,是用js实现的一种东西。。。

顾晓北 | 园豆:10794 (专家六级) | 2021-11-08 18:09

您好,本人还是菜鸟级,能否提供具体的实现代码

支持(0) 反对(0) liusijie | 园豆:184 (初学一级) | 2021-11-09 09:59

不是瀑布流,就是一个简单的滚动分页

支持(0) 反对(0) demo_you | 园豆:204 (菜鸟二级) | 2021-11-09 09:59

@demo_you: 亲,能否提供一下具体实现代码?

支持(0) 反对(0) liusijie | 园豆:184 (初学一级) | 2021-11-09 10:02

@liusijie: 如果 可滚动容器的高度 超出当前窗口显示范围的高度(视口的高度 + 页面被卷去的高度) 则 分页 + 1

支持(0) 反对(0) demo_you | 园豆:204 (菜鸟二级) | 2021-11-09 10:04

@liusijie: 我下面有提供示例 亦或 https://www.cnblogs.com/coderDemo/p/14188217.html
虽然语言不一样,但是原理是差不多的

支持(0) 反对(0) demo_you | 园豆:204 (菜鸟二级) | 2021-11-09 10:05

@demo_you: 是不是瀑布流不重要,重要的是,不能用repeater这种服务端控件,否则每次都要刷新页面。。。

支持(0) 反对(0) 顾晓北 | 园豆:10794 (专家六级) | 2021-11-09 10:06
0

个人看法,各位大神轻拍。我觉得你这个显示慢是因为Repeater控制加载的图片太多,可以把所有的数据源放在List 1里面 不需要加载图片,Repeater显示的数据源绑定List2,每次显示多少图片,就从List1里面读取数据,根据Llist1里面的路径加载图片。这样,就只需要加载几张需要显示的图片。
我才初学C# 看这个问题 感觉和我们学的电子相册差不多的意思。如果说的不对,请勿见怪!

中华鲟3670 | 园豆:617 (小虾三级) | 2021-11-09 00:48
0

js版的 道理相同

onScroll() {
      // 可滚动容器的高度
      const innerHeight = this.$el.clientHeight
      // 可滚动容器超出当前窗口显示范围的高度
      const {clientHeight, scrollTop} = document.documentElement
      if (innerHeight <= clientHeight + scrollTop) {
        // do sth
        this.items += 10
      }
    }
demo_you | 园豆:204 (菜鸟二级) | 2021-11-09 10:01
0

js懒加载了解一下

阅尽三千 | 园豆:327 (菜鸟二级) | 2021-11-09 16:47

具体原理就是通过获取滚动条状态去后台分页获取数据展示。
页面设定好初次展示的10个内容的滚动条高度,然后实时获取滚动条位置,等滚动条位置到达底部的时候,分页从后台获取数据通过js追加页面上信息,同步滚动条高度。 循环处理,知道后台返回空数据,提示加载完毕

支持(0) 反对(0) 阅尽三千 | 园豆:327 (菜鸟二级) | 2021-11-09 16:52
0

好兄弟,是这样的,我的同事也做了一个滚动翻页,效果是比如第一次查询了100条数据,向下滚动,就会在加100条数据,变成200条,他的实现方法是,检测滚动条,如果到达百分之80,就再次请求API获取数据,这次获取200条(因为第一次获取了100条),这样前端就会感觉加了数据,实际上是一起查了200条

多啦T梦 | 园豆:202 (菜鸟二级) | 2021-11-09 17:38

这样会有问题的吧,要是他这么一直浏览下去,你的服务端不是崩溃了,我个人觉得应该是每次都加载100条,新取的数据在前端push到旧的数据里继续显示

支持(0) 反对(0) jqw2009 | 园豆:2397 (老鸟四级) | 2021-11-15 10:38

@jqw2009: 我这个只是一个看数据的,你说的情况确实会存在,但是一般看数据的话也没人会一条一条的去看对吧,都是按条件查出来在去看,还有个主要原因是公司内部网,也不会有人恶意的去一直刷新,所以这个情况存在,同时又不存在,哈哈.然后题主这个东西,课程也不会有几千上万门吧,刷新的数据最大总量也不会导致崩溃,所以这个方法大概还是可行.你的优化推荐也可用采纳

支持(0) 反对(0) 多啦T梦 | 园豆:202 (菜鸟二级) | 2021-11-15 11:00
0

滚动的时候页码+1

LiveCoding | 园豆:312 (菜鸟二级) | 2021-11-13 15:59
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册