你有没有在手机上看网页，发现每次要换页都得拼命点“上一页”或者“下一页”？这样很麻烦，用着也不舒服。今天，我就教你一招，利用SpringMVC和HTML5技术，能让手机网页底部下滑就能更新内容。你往下划屏幕后，网站会自动给你加载更多内容，感觉是不是好多了？
一、为什么传统的分页方式在移动端不适用？
为啥？因为咱们现在用的那种在电脑上看网页时候的分页，在手机上就不太好用！手机屏幕小，每屏显示的东西也少了些，反复点”上一页”和”下一页”既麻烦又可能手抖点错，影响使用感受。再加上每次翻页都得重新加载，在网速慢的情况下，等得人心烦意乱，效率大打折扣。
怎么用SpringMVC和HTML5让手机体验更爽？
SpringMVC这个Java的MVC框架，能帮咱们搞定前后端。再加上HTML5，跟用户的互动就更自然！说到上滑加载更多内容这种效果，就用HTML5的滑动事件，配合JS（比如jQuery和Zepto）监测用户滑动，然后在滑动到底部时启动加载。
三、前端代码的实现细节
想要实现这个功能，前端得用上jQuery和Zepto这俩库。jQuery是个超级火的JavaScript库，能让咱们轻松搞定HTML文档的遍历呀、事件处理呀、动画呀啥的。而Zepto，就是专门给现代智能手机浏览器设计的JavaScript框架，虽然比jQuery小巧多了，但功能却毫不逊色，特别适合手机浏览啥的。咱家前端代码里得设个滑动手势，一看页面到底部了，立马开始加载新内容哈。
滑动到底部加载下一页内容 <script src=""> <script src=""> table { width:100%; padding:0 15px; background:#fff; border-collapse: collapse; } table td { padding: 6px 0; width:33%; border-bottom:1px solid #e1e1e1; } tr td:nth-child(2) { text-align: center; } tr td img { width: 24px; vertical-align: middle; } tr td:last-child { text-align: right; } td>div:first-child { /*margin-bottom: -6px;*/ } td>div:last-child { color: #9C9C9C; }$(function(){ query('01');//第一次加载 }); function query(type) { alert(type); $.ajax({ url : "/query", data : { pageNo : $("#pageNo").val() }, cache : false, success : function(data) { loading=true; if(data==null) { $("#pageNo").val(parseInt($("#pageNo").val())-1); }else { var content=""; if(type=="00") { if(data.length==0) { $("#pageNo").val(parseInt($("#pageNo").val())-1); return ""; } for(var i=0;i<data.length;i++) { content=content + '
' + ' '; } $("#wrapper").append(content); }else{ for(var i=0;i<data.length;i++) { content=content + '' + ' '+data[i].id+''+data[i].time+'¥'+data[i].amount+' ' + '' + ' '; } $("#wrapper").html(content); } } }, error : function(){ loading=true; $("#pageNo").val(parseInt($("#pageNo").val())-1); _alert("查询数据出错啦，请刷新再试"); } }); } var loading=false; Zepto(function($){ $(window).scroll(function(){ if(($(window).scrollTop()+$(window).height()>$(document).height()-10)&&loading){ loading=false; $("#pageNo").val(parseInt($("#pageNo").val())+1); query("00"); } }); }) var ua = navigator.userAgent.toLowerCase(); if (/android/.test(ua)) { $('.date>div>img:last').css({"margin-left":"-25px"}); }' + ' '+data[i].id+''+data[i].time+'¥'+data[i].amount+' ' + '
四、后端代码的支持
在后台，我们要用SpringMVC处理来自网页的异步请求，这主要包括两部分：第一就是创建新页面，其次就是处理AJAX查数据的活儿。当咱们接到了$Ajax请求的时候，后台得马上给个回应，去查找想要的信息，然后把它交还给网页。所以，我们的后台代码要快且稳，保证用户用起来不卡顿也不出错。
五、用户体验的提升体现在哪里？
package com.test.web.controller;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.test.web.dto.DataDto;
/**
* 测试控制器
*
* @author smile2014
*
*/
@Controller
public class TestController {
/**
*
* @return
*/
@RequestMapping("/")
public String index() {
return "test";
}
/**
* 查询订单列表
*
* @param model
* @param openId
* 用户授权Id
* @return
* @throws Exception
*/
@RequestMapping(value = { "/query" })
@ResponseBody
public Object query(Model model, Integer pageNo) throws Exception {
System.out.println("pageNo="+pageNo);
if (pageNo == null) {
pageNo = 1;
}
List datas = new ArrayList();
for (int i = pageNo * 15; i < (pageNo + 1) * 15; i++) {
DataDto data = new DataDto("10000" + i, "10:" + i, "17." + i);
datas.add(data);
}
System.out.println("datas="+datas);
return datas;
}
}
这样一来，当你想查看更多东西时，只要往上滑动屏幕就好，不用老是点啊点或者等网页刷新。这样做既方便，又让你看得更过瘾！你能更好地关注文章和内容，不会因为那些麻烦事儿分心。
六、技术实施中的挑战与解决方案
package com.test.web.dto;
/**
* 数据dto
*
* @author smile2014
*
*/
public class DataDto {
private String id;
private String time;
private String amount;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getTime() {
return time;
}
public void setTime(String time) {
this.time = time;
}
public DataDto(String id, String time, String amount) {
super();
this.id = id;
this.time = time;
this.amount = amount;
}
public String getAmount() {
return amount;
}
public void setAmount(String amount) {
this.amount = amount;
}
}
实施这个技术方案时，可能有点儿小困难，比如怎么精准地捕捉到你的滑动，怎样更快地加载数据，还有就是遇到异常要怎么办之类的问题。咱们得细心调好代码，优化算法，还要有应对异常的办法，这样才能保证系统稳定可靠！
七、未来的发展趋势与展望
现在大家手机越来越好使了，所以咱们对手机体验也就更高！滑动查看更多信息只是提升手机用户体验的一小步而已。以后，我们还能探索更多好玩儿的新科技，比如用机器学习猜你可能喜欢什么东西，或者用增强现实技术带给你更真实的浏览感觉。
来数说家底，用SpringMVC和HTML5在手机上滑动便能加载更多内容，是个吆喝着能提升用户体验的绝佳办法。这样一来，简单两下就让用户的操作变得更舒心，而且数据加载速度也快得飞起，让大家看网页时感觉就像开了加速器似的。要是你对此有啥看法，欢迎在评论区畅所欲言，别忘了给我点个赞并分享出去！
评论0