demo地址：https://github.com/chenjy512/appdemo.git demo可能有点乱
问题：最近需要在手机端开发下滑分页功能，这就需要涉及到ios与安卓系统的兼容问题。在实际开发过程中遇到了：
1.手机浏览器不支持windos.open 与 windos.close 函数，
2.所以使用两个iframe来实现打开关闭页面，那么就遇到了一个是在当前页面滑动分了，一个是在iframe下滑动分页。至于为什么这样后面来解释。
下滑动加载分页
前提需要搭建一个springmvc工程，用于ajax数据传输
mobile.jsp页面用户下滑获取数据
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="<%=basePath%>">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>滑动到底部加载下一页内容</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script src="<%=basePath%>/bootstrap/jquery-1.3.2.min.js"></script>
<script src="<%=basePath%>/bootstrap/zepto.min.js"></script>
<link rel="stylesheet" href="<%=basePath%>/bootstrap/bootstrap.min.css">
<script src="<%=basePath%>/bootstrap/bootstrap.min.js"></script>
<style type="text/css">
</style>
</head>
<body>
<input type="hidden" name="preNo" id="preNo" value="10" />
<input type="hidden" name="pageNo" id="pageNo" value="10" />
<input type="hidden" name="type" id="type" value="1" />
<div class="white" >
<table class="table table-hover">
<thead><!-- 表头 -->
<tr>
<th>序号</th>
<th>主题</th>
<th>编号</th>
</tr>
</thead>
<tbody id="wrapper">
</tbody>
</table>
<div id='load'></div>
</div>
</body>
</html>
<script>
$(function(){
query('01',1);//第一次加载
});
/**
* type:判断是否首次加载
status：判断上滑下滑
*/
function query(type,status)
{
var num;
if(status == 1){
num = $("#pageNo").val(); //下滑吗
}else{
num = $("#preNo").val(); //上滑吗
}
$.ajax({
type: "post",
url : "<%=path%>/hello/query.do",
data : {
pageNo : num,
type : 1
},
async: true,
dataType:'json',
beforeSend:function(XMLHttpRequest){
//$("#load").html("<img src='bootstrap/loading.gif' />");
},
success : function(data) {
//$("#load").html();
//alert("第几次请求:"+$("#pageNo").val());
loading=true;
//加载数据是否有误
if(data==null)
{
if(status == 1){
$("#pageNo").val(parseInt($("#pageNo").val())-1);
}else{
$("#preNo").val(parseInt($("#preNo").val())+1);
}
}else
{
var content="";
//判断是否是初次加载数据
if(type=="00")
{
if(data.length==0)
{
if(status == 1){
$("#pageNo").val(parseInt($("#pageNo").val())-1);
}else{
$("#preNo").val(parseInt($("#preNo").val())+1);
}
return "";
}
for(var i=0;i<data.length;i++)
{
var color;
if(i % 3==0){
color='active';
}else if(i % 13==0){
color='success';
}else if(i % 5==0){
color='warning';
}else{
color = 'danger';
}
content=content
+ '<tr class='+color+'>'
+ '<td>'+data[i].id+'</td>'
+ '<td><a href=<%=path%>/hello/showinfo.do?id='+data[i].id+'>'+data[i].time+'</a></td>'
+ '<td>'+data[i].amount+'</td>'
+ '</tr>';
}
if(status == 1){
$("#wrapper").append(content); //下滑追加
}else{
$("#wrapper").prepend(content);//上滑追顶
}
//
}else{
//初次加载数据
for(var i=0;i<data.length;i++)
{
var color;
if(i % 3==0){
color='active';
}else if(i % 13==0){
color='success';
}else if(i % 5==0){
color='warning';
}else{
color = 'danger';
}
content=content
+ '<tr class='+color+'>'
+ '<td>'+data[i].id+'</td>'
+ '<td><a href=<%=path%>/hello/showinfo.do?id='+data[i].id+'>'+data[i].time+'</a></td>'
+ '<td>'+data[i].amount+'</td>'
+ '</tr>';
}
$("#wrapper").html(content);
}
}
},
error : function(){
loading=true;
//$("#pageNo").val(parseInt($("#pageNo").val())-1);
if(status == 1){
$("#pageNo").val(parseInt($("#pageNo").val())-1);
}else{
$("#preNo").val(parseInt($("#preNo").val())+1);
}
alert("查询数据出错啦，请刷新再试");
}
});
}
//监测是否滑到底部--到底部则加载数据
Zepto(function($){
$(window).scroll(function(){
if(($(window).scrollTop()+$(window).height() > $(document).height()-10)){
$("#pageNo").val(parseInt($("#pageNo").val())+1);
query("00");//数据加载
}
});
});
//上滑，下滑的一个测试版，有点问题
/** Zepto(function($){
$(window).scroll(function(){
//$(window).scrollTop()：窗口滑动高度
//$(window).height()：窗口高度
//$(document).height()：文档高度
if($(window).scrollTop() == 0){
if($("#preNo").val() < 1){
alert('已经到达首页'+$("#preNo").val())
return ;
}
// alert('已经到达顶部了~~~');
//
$("#preNo").val(parseInt($("#preNo").val())-1);
query("00",2);//数据加载
}
if(($(window).scrollTop()+$(window).height() > $(document).height()-10)){
$("#pageNo").val(parseInt($("#pageNo").val())+1);
query("00",1);//数据加载
}
});
});
**/
</script>
在iframe下的页面下滑请求加载数据是不支持的需要改成如下–事件监听的模式
<script>
// Zepto(function($){} 这种的加载方式在iframe情况下是不加载数据的需要使用touchmove监听
//监测是否滑到底部
function change() {
if(($(window).scrollTop()+$(window).height() > $(document).height()-10)){
// alert(111);
$("#pageNo").val(parseInt($("#pageNo").val())+1);
query("00");//数据加载
}
}
document.addEventListener('touchmove', change);
</script>
接收滑动请求反馈数据–主要需要导入json的jar包自动将返回页面的数据解析成json类型
package com.mobile.controller;
import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.Date;
import java.util.Iterator;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
import org.springframework.web.servlet.HttpServletBean;
import com.mobile.entity.DataDto;
@Controller
@RequestMapping(value="/hello")
public class MobileDemoController {
@RequestMapping(value="/world.do",method=RequestMethod.GET)
public String hello(Model model){
model.addAttribute("msg", "你好spring mvc");
return "index";
}
@RequestMapping(value = "/query.do")
@ResponseBody
public List<DataDto> query(Model model, Integer pageNo,Integer type) {
System.out.println("pageNo="+pageNo);
// if (pageNo == null || pageNo < 1) {
// pageNo = 0;
// }else{
// pageNo = pageNo-1;
// }
String str = "向下滑动屏幕进行分页加载数据";
if(type == 2){
str = "向左滑动屏幕";
}else if(type == 3){
str = "向右滑动屏幕";
}
List<DataDto> datas = new ArrayList<DataDto>();
for (int i = pageNo * 15; i < (pageNo + 1) * 15; i++) {
DataDto data = new DataDto("10000" + i, str + i, new Date().getTime()+"");
datas.add(data);
}
System.out.println("datas="+datas);
try {
Thread.sleep(100L);
} catch (InterruptedException e) {
e.printStackTrace();
}
return datas;
}
数据封装vo类
package com.mobile.entity;
import java.io.Serializable;
public class DataDto implements Serializable {
/**
*
*/
private static final long serialVersionUID = 1L;
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;
}
}
json自动转换器
<!-- json转换器 -->
<bean id="mappingJacksonHttpMessageConverter" class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter">
<property name="supportedMediaTypes">
<list>
<value>text/html;charset=UTF-8</value>
</list>
</property>
</bean>
112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
