鼠标向下滚动，继续加载下一页的列表
0
悬赏园豆：20
[待解决问题]
我用C#+asp.net开发网站。用Repeater显示课程列表，每个ItemTemplate里放有一张图片，一行简介，一个单击事件，绑定后每行显示3个课程清单，大概有50行共150个课程清单，单击图片会播放课程视频，观看完成后会保存相应的学员观看记录。现在要实现，如何让鼠标向下滚动时，每次只显示大概10行的课程清单，当鼠标再往下滚动时，再加载接下来的10行课程清单，依次类推，直至50行课程清单加载完毕。目前，我是一次性加载所有的课程列表出来，所以显示速度会很慢.本人还是菜鸟级，能否提供具体的实现代码？
所有回答(6)
0
这跟什么asp.net无关。。。如果我没记错，这东西应该是叫“瀑布流”，是用js实现的一种东西。。。
您好，本人还是菜鸟级，能否提供具体的实现代码
不是瀑布流，就是一个简单的滚动分页
@demo_you: 亲，能否提供一下具体实现代码？
@liusijie: 如果 可滚动容器的高度 超出当前窗口显示范围的高度（视口的高度 + 页面被卷去的高度） 则 分页 + 1
@liusijie: 我下面有提供示例 亦或 https://www.cnblogs.com/coderDemo/p/14188217.html
虽然语言不一样，但是原理是差不多的
@demo_you: 是不是瀑布流不重要，重要的是，不能用repeater这种服务端控件，否则每次都要刷新页面。。。
@顾晓北: 我是用的asp.net+C#，它里面很多服务器控件，感觉不用服务器控件，有点浪费它的功能了，不过确实服务器控件弊端是有的，就像您说的，导致刷新。
关于滚动鼠标不断加载数据的问题，能不能有些实例源代码做参考?我在网上一直没找到解决办法
0
个人看法,各位大神轻拍。我觉得你这个显示慢是因为Repeater控制加载的图片太多，可以把所有的数据源放在List 1里面 不需要加载图片，Repeater显示的数据源绑定List2，每次显示多少图片，就从List1里面读取数据，根据Llist1里面的路径加载图片。这样，就只需要加载几张需要显示的图片。
我才初学C# 看这个问题 感觉和我们学的电子相册差不多的意思。如果说的不对，请勿见怪！
0
js版的 道理相同
onScroll() {
// 可滚动容器的高度
const innerHeight = this.$el.clientHeight
// 可滚动容器超出当前窗口显示范围的高度
const {clientHeight, scrollTop} = document.documentElement
if (innerHeight <= clientHeight + scrollTop) {
// do sth
this.items += 10
}
}
0
js懒加载了解一下
具体原理就是通过获取滚动条状态去后台分页获取数据展示。
页面设定好初次展示的10个内容的滚动条高度，然后实时获取滚动条位置，等滚动条位置到达底部的时候，分页从后台获取数据通过js追加页面上信息，同步滚动条高度。 循环处理，知道后台返回空数据，提示加载完毕
0
好兄弟,是这样的,我的同事也做了一个滚动翻页,效果是比如第一次查询了100条数据,向下滚动,就会在加100条数据,变成200条,他的实现方法是,检测滚动条,如果到达百分之80,就再次请求API获取数据,这次获取200条(因为第一次获取了100条),这样前端就会感觉加了数据,实际上是一起查了200条
这样会有问题的吧，要是他这么一直浏览下去，你的服务端不是崩溃了，我个人觉得应该是每次都加载100条，新取的数据在前端push到旧的数据里继续显示
@jqw2009: 我这个只是一个看数据的,你说的情况确实会存在,但是一般看数据的话也没人会一条一条的去看对吧,都是按条件查出来在去看,还有个主要原因是公司内部网,也不会有人恶意的去一直刷新,所以这个情况存在,同时又不存在,哈哈.然后题主这个东西,课程也不会有几千上万门吧,刷新的数据最大总量也不会导致崩溃,所以这个方法大概还是可行.你的优化推荐也可用采纳
0
滚动的时候页码+1
