public partial class News{public int ID{ get; set; }public int Title{ get; set; }}

///控制器 返回JSON 格式化JSON我用了第三方的:Newtonsoft.Json public string List(int page=1)
{  Response.ContentType = "application/Json";List<News> J= db.News.OrderByDescending(p => p.ID).Skip(10 * page).Take(10).ToList();return JsonConvert.SerializeObject(J);
}

<div class="content"><ul class="list" id="container"></ul><div style="text-align:center;padding:10px;" id="load">点击显示数据</div>
</div>

javascript 需要jquery支持

    var i = 1;function JsonLoad() {LoadJsonDate(i);}function LoadJsonDate(pageindex) {i++;$.get("/json/List", { page: pageindex}, function (data) {if (data.length > 0) {var jsonObj = JSON.parse(data);AddDate(jsonObj);} else {$("#load").html("没有了...");}});}function AddDate(jsondate) {var html = '';for (var j = 0; j < jsondate.length; j++) {html += "<li><a href=\"View/" + jsondate[j].ID + "\">" + jsondate[j].title + "</a></li>";}$("#container").append(html);if (j < 10) {$("#load").html("没有了...");}}$(function () {JsonLoad();//打开页面就加载//点击底部加载区就加载//为防止某些低版本手机滚动条事件不稳定$("#load").click(function () {$("#load").html("<img src=\"load.gif\" alt=\"正在加载\"/>");setTimeout("JsonLoad()", 500);//延时加载
        });var winH = $(window).height();var scrollHandler = function () {var pageH = $(document.body).height();var scrollT = $(window).scrollTop();var h = (pageH - winH - scrollT) / winH;$("#load").html("点击显示下10条");if (h <= 0) {$("#load").html("<img src=\"load.gif\" alt=\"正在加载\"/>");setTimeout("JsonLoad()", 500);//延时加载
            }}$(window).scroll(scrollHandler);});

转载于:https://www.cnblogs.com/chr1219/p/3696004.html

MVC+JSON 无限滚动翻页相关推荐

  1. 【uni-app】swiper 实现纵向轮播,且支持鼠标滚轮滚动翻页

    前言 swiper 实现纵向轮播,且支持鼠标滚轮滚动翻页 操作方法(亲测可用) https://www.w3h5.com/post/607.html

  2. js:Vue.js自定义指令实现scroll下滑滚动翻页

    Vue.js自定义指令实现scroll下滑滚动翻页 核心代码 import Vue from 'vue'// v-scroll Vue.directive('scroll', {bind(el, bi ...

  3. android listview左右滑动动画效果,Android基于ListView实现类似QQ空间的滚动翻页与滚动加载效果...

    本文实例讲述了Android基于ListView实现类似QQ空间的滚动翻页与滚动加载效果.分享给大家供大家参考,具体如下: 1. 滚动加载 listView.setOnScrollListener(n ...

  4. Android ListView 滚动翻页效果

    http://blog.csdn.net/top_code/article/details/9629259

  5. 图片延迟加载和滑动翻页

    一:预加载 首先,我们需要引用JS, <script src="/Scripts/JQuery.LazyLoad.js"></script> 其次,修改im ...

  6. arduino nano 蓝牙_ESP32模拟无线蓝牙鼠标自制翻页笔神器

    平时的PPT翻页笔需要插入USB信号接收器,安装相应的驱动,在实际使用过程当中发现并不是每台电脑都能够直接正常的使用,接收器有时也因为反复拔插很容易坏掉导致无法正常使用.ESP32开发板带有WIFI和 ...

  7. 交互组件滚动条,搜索框,上传组件,翻页的微创新

    纵观交互设计发展史,就是创新的交互模式被广为接受后成为标准,旧的交互模式不断被淘汰的历史.所以交互模式发展也是一个"物竞天择,优胜劣汰"的过程.本文是09年在碳酸饮料会上做过的一次 ...

  8. 计算机文档翻页怎么设置,Word文档如何设置自动翻页?

    在网上阅读一篇长篇小说时,或者浏览一段长篇文档时.最折磨人的就是手要一直用鼠标上来回滚动翻页.时间长了特别累人.那我们在Word阅读像论文这类的长篇文档时也会遇到这种情况.不过在word中除了鼠标我们 ...

  9. kindle PC端有没有办法连续翻页?

    没有 我给他们了反馈: PC版的kindle阅读器能设置程滚动翻页吗? 该功能从2015年,就有用户需求,现在都2021年3月28日10:10:55了,6年多了,你们开发这个功能很难嘛? 请把客户当人 ...

最新文章

  1. 织梦缩略图php,dedecms怎么实现列表页缩略图随机调用
  2. oracle插入java时间,java向oracle中插入字符或时间型 时间数据
  3. (传送门)instant run原理
  4. Spring Cloud Alibaba - 13 OpenFeign应用篇
  5. 工作295:发布逻辑处理
  6. 力荐!计算机视觉开源工具中的瑞士军刀—Dlib最新高级特性教程
  7. Java Maven项目打包成可执行jar文件
  8. ssis for循环容器_使用SSIS ForEach Loop容器以日期顺序处理文件
  9. 记一次nginx反向代理做转发遇到的坑
  10. HandyJSON:Swift语言JSON转Model工具库
  11. 过滤器为JSP文件生成静态页面
  12. “被”夭折的翻译——《CoffeeScript: Accelerated JavaScript Development》
  13. Android四大组件每个组件的作用?它们都可以开启多进程吗?
  14. 如何简单形象又有趣地讲解神经网络是什么
  15. java实现一个月的日历打印,Java实现按年月打印日历功能【基于Calendar】,日历calendar...
  16. Js数据类型间的相互转换
  17. jQuery悬浮QQ客服插件
  18. 数据结构第二章 线性表
  19. MMA-清除所有变量的方法
  20. Visual Studio Error

热门文章

  1. 探索ArrayList自动改变size真相
  2. Otsu algorithm
  3. Summer Tree 第六期完成
  4. Andlinux 使用记录(转)
  5. S6 文件备份与压缩命令
  6. 10.18.2 linux文件压缩与打包
  7. java 异常信息_优雅的异常处理 -- Java中的异常
  8. java类验证和装载顺序_JVM类加载过程分析及验证
  9. bcb异常处理显示错误行号_SpringBoot系列(七)- springboot 错误异常处理统一办法
  10. 倒计时 | 7.24 阿里云 Serverless Developer Meetup 杭州站报名火热进行中!