-
移动开发
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
白羽
2018-06-06
来源 ：网络
阅读 1248
评论 0
摘要：WebApp开发,关于表格的上下拉，本来感觉没有什么好写的，贴贴代码，以后遇见类似的就这么套就是了。但是在实际使用中还是有些问题：1.真机调试时安卓机的流畅度就没有苹果机的好，2.不知道是否有cell的重用，上拉的时候就在那里一直的appendChild。希望本文对大家学WEBAPP有所帮助.
关于表格的上下拉，本来感觉没有什么好写的，贴贴代码，以后遇见类似的就这么套就是了。但是在实际使用中还是有些问题：1.真机调试时安卓机的流畅度就没有苹果机的好，2.不知道是否有cell的重用，上拉的时候就在那里一直的appendChild。
效果图
为什么MarkDown不能设置图片大小呢？
代码
请求和样式都在一个html文件里面：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<link rel="stylesheet" href="../css/app.css" />
</head>
<style>
.head-part {
padding-top: 10px;
}
.head-part #auther {
height: 30px;
line-height: 30px;
margin-left: 70px;
}
.head-part #currentDate {
height: 30px;
width: 300px;
line-height: 30px;
margin-left: 70px;
font-size: 14px;
}
.head-part .about-type {
float: right;
margin-right: 10px;
text-align: right;
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
width: 100px;
color: red;
}
#headImage {
width: 60px;
height: 60px;
border-radius: 30px;
display: block;
position: absolute;
float: left;
}
#titleConcent {
height: 110px;
}
#mainImage {
padding-right: 10px;
width: 100px;
height: 100px;
float: right;
}
#titleConcent1 {
margin-top: 10px;
height: 100px;
text-overflow:ellipsis;
overflow:hidden;
line-height: 25px;
}
.mui-scroll .mui-table-view {
padding-left: 10px;
}
.tableView-cell {
list-style-type: none;
/*设置下边框样式*/
border-bottom-style: solid;
border-bottom-width: 1px;
border-bottom-color: #D3D3D3;
}
.mui-content{
padding-top: 44px;
}
.mui-table-view:before{
0px;
}
.mui-table-view:after{
0px;
}
</style>
<body style="background-color: #D3D3D3;">
<header class="mui-bar mui-bar-nav black">
<h1 class="mui-title">消息</h1>
</header>
<div class="mui-content">
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view" style="background-color: white;">
<li class="tableView-cell">
<!--<div>
<img src="../images/shuijiao.jpg"/ id="headImage">
<div>
<div id="auther">
</div>
<div id="currentDate">
2016-05-16 10:22:12
</div>
</div>
</div>
<div id="titleConcent">
<img src="../images/yuantiao.jpg" id="mainImage"/>
<div id="titleConcent1">
</div>
</div>-->
</li>
</ul>
</div>
</div>
</div>
</body>
<script src="../js/mui.js" ></script>
<script type="text/javascript" charset="utf-8">
var pageIndex = 1; // 页数
var allPages = 1; // 总页数
/*showAPI配置参数*/
var appid = "19297"
var sign = "56743e56cce6482eb499e0abb79a0c78"
var baseUrl = "https://route.showapi.com/582-2?"
var table = document.body.querySelector('.mui-table-view');
(function($) {
//阻尼系数 感觉在上拉时比较明显
var deceleration = mui.os.ios ? 0.003 : 0.0009;
$('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: true, //是否显示滚动条
deceleration: deceleration
});
})(mui);
mui.init({
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh
},
up: {
contentrefresh: '正在加载...',
callback: pullupRefresh
}
}
});
/**
* 下拉刷新具体业务实现
*/
function pulldownRefresh() {
pageIndex = 1;
console.log('下拉刷新');
//table.innerHTML = '';
setTimeout(function() {
getaData();
mui('#pullrefresh').pullRefresh().endPulldownToRefresh();
mui('#pullrefresh').pullRefresh().refresh(true);
}, 1000);
}
/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
pageIndex = ++pageIndex;
console.log(pageIndex);
console.log('上拉加载更多');
setTimeout(function() {
getaData()
}, 1000);
}
if (mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pulldownLoading();
}, 500);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pulldownLoading();
});
}
// 获取数据
function getaData() {
var timestamp = getDataStr();
mui.plusReady(function() {
mui.ajax(baseUrl, {
data: {
key: '',
typeId: '',
showapi_appid: appid,
showapi_sign: sign,
showapi_timestamp: timestamp,
page:pageIndex
},
dataType: 'json',
type: 'post',
timeout: 10000,
beforeSend: function(data) {
plus.nativeUI.showWaiting();
},
success: function(data) {
plus.nativeUI.closeWaiting();
if (data.showapi_res_code == 0) {
console.log("成功");
var dice1 = data.showapi_res_body;
var dice2 = dice1.pagebean;
var result = '';
if (pageIndex == 1) { //下拉刷新需要先清空数据
table.innerHTML = '';// 在这里清空可以防止刷新时白屏
}
allPages = dice2.allPages;/*获取总的分页数*/
/*表格填充数据 mui.each是异步的*/
mui.each(dice2.contentlist, function(index, item) {
var li = document.createElement('li');
li.url = item.url; /*详情url*/
li.title = item.title; /*详情标题*/
li.className = 'tableView-cell';
li.innerHTML = '<div>'
+ '<img src="' + item.userLogo + '"/ id="headImage">'
+ '<div>'
+ '<div id="auther">'
+ item.userName
+ '<span>' + item.typeName + '</span></div><div id="currentDate">'
+ item.date + '</div></div></div><div id="titleConcent">'
+ '<img src=" '+ item.contentImg + '" id="mainImage"/><div id="titleConcent1">'
+ item.title + '</div></div>';
table.appendChild(li, table.firstChild);
});
if(pageIndex < allPages){
mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); /*能上拉*/
}else{
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);/*不能上拉*/
}
}
},
error: function(xhr, type, errerThrown) {
mui.toast('网络异常,请稍候再试');
plus.nativeUI.closeWaiting();
mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
}
});
});
}
// 获取当前时间 yyyyMMddHHmmss
function getDataStr(){
var date = new Date();
var year = date.getFullYear();
var mouth = date.getMonth() + 1;
var day = date.getDate();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
if(mouth < 10){ /*月份小于10 就在前面加个0*/
mouth = String(String(0) + String(mouth));
}
var currentDate = String(year) + String(mouth) + String(day) + String(hour) + String(minute) + String(second);
return currentDate;
}
//链接批量处理 页面跳转
var aniShow = "pop-in";
mui('.mui-content').on('tap', 'li', function() {
console.log("detail-url -- >> " + this.url);
console.log("detail-title -- >> " + this.title);
mui.openWindow({
url: 'detail.html',
id: 'detail',
show: {
duration: 200,
},
waiting: {
autoShow: true
},
extras: {
detailUrl: this.url,
detailTitle: this.title
},
});
});
</script></html>思路
代码里面有注释，大致思路：
1.做一个刷新的容器；
2.加上一个可以上下滑动的scroll；
3.创建table;
4.创建cell；
5.等把cell的样式做好了就就可以把cell的代码注释掉，然后在请求回来数据的时候再写一次，只是这次是使用的网络数据。
关于上下拉
关于上下拉，其实也就是一些固定的思路，之前在写原生的iOS表格上下拉的时候基本也是一些固定的思路和方法。上下拉的思路和方法，可以看看《HTML5 WebApp开发(一)新建项目》提到的模板项目的目录examples/pullrefresh_sub.html这个html文件，只是这里我们使用的网路数据。
注意点
1.在下拉刷新的时候我们需要先清空使用table.innerHTML = ”;清空一下表格。关于在什么时候调用清空的方法，在代码里面有说明；
2.分页的处理，分页的处理基本和原生iOS开发时一样，无非就是判断当前页码是否是最后一页，最后一页的时候就不可以上拉了；
提高点
页面数据需要做缓存，在没有网络的时候，如果没有缓存，那么这个页面就空白的，这样的用户体验并不好。关于加缓存的问题，等有时间继续写这个代码的时候在来加。
本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
