Start
In the "Small Project of Swift Integration of Alamofire/Kingfisher/MJRefresh/MBProgressHUD" , a small demo of up and down is made using the interface on showAPI. There's not much time for Swift after that, and there aren't as many blog posts this month as last month. This month, I used HBuilder to engage in WebApps. No matter what the App is, I finally learned something. I didn't go out for a day yesterday, so I built a small WebApp project by myself. I typed the code yesterday. Yesterday's first article "HBuilder WebApp Development (1) New Project" , but I didn't have time to write the second article. Blog, I will write the second post after work today.
Regarding the up-down and down-down of the form, I personally feel that there is nothing to write, just paste the code, and I will just do it when I encounter similar ones in the future. However, there are still some problems in actual use: 1. The fluency of the Android machine is not as good as that of the Apple machine when debugging the real machine, 2. I don't know if there is cell reuse, and it will always appendChild there when it is pulled up.
renderings
Why can't MarkDown set the image size?
code
Requests and styles are all in one html file:
<!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 class="head-part">
<img src="../images/shuijiao.jpg"/ id="headImage">
<div class="about-auther">
<div id="auther">
作者名字<span class="about-type">印象派印象</span>
</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">
今天是2016.05.16,其实我的内心是奔溃的啊,加班!
今天是2016.05.16,其实我的内心是奔溃的啊,加班!
今天是
</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 class="head-part">'
+ '<img src="' + item.userLogo + '"/ id="headImage">'
+ '<div class="about-auther">'
+ '<div id="auther">'
+ item.userName
+ '<span class="about-type">' + 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>ideas
There are comments in the code, the general idea:
1. Make a refresh container;
2. Add a scroll that can slide up and down; 3.
Create a table;
4. Create a cell;
Comment out the cell code, and then write it again when requesting data back, only this time using the network data.
About pull down
Regarding the up-down and down-down, it is actually some fixed ideas. When writing the original iOS table up and down, there are basically some fixed ideas and methods. For the idea and method of pulling up and down, you can look at the html file examples/pullrefresh_sub.html in the template project directory mentioned in "HTML5 WebApp Development (1) New Project" , which is just the network data we use here.
important point
1. When pulling down to refresh, we need to clear the table using table.innerHTML = "; clear the table. There are instructions in the code about when to call the clearing method;
2. Paging processing, paging processing is basically and native iOS The same as when developing, it is nothing more than judging whether the current page number is the last page, and the last page cannot be pulled up;
raise point
Page data needs to be cached. When there is no network, if there is no cache, then the page will be blank, and this user experience is not good. Regarding the issue of adding cache, I will add it when I have time to continue writing this code.
finally
Code download address: please click me!
Changelog
- 2016-05-24
Regarding the problem of caching, in "Improving HTML5 Performance Experience Series to Avoid White Screens" , HBuilder provides some optimization methods, which are somewhat related to data caching, but I have my own ideas, and the actual operation is also feasible of.
Declare a global variable such as revData (revData can also be stored permanently using other methods) to receive data from the server. When displaying, we make a judgment. When the revData data is not empty, we parse the data display from the revData. When the revData is empty, we display the data currently obtained from the network. Since the initial revData is empty, so The data obtained from the network is displayed for the first time, and then the data revData obtained from the network last time is displayed. Why can the picture be displayed when revData is used for display later? This is HBuilder helping us to cache the image, just like SDWebImage, we only need to know the url of the image to get the image data from the cache. But using only revData to cache data is problematic. What if the data is updated the next time I enter the page? At this time, we can add a field to the json data returned by the server, such as: update. When update=1, it means that the data has changed. At this time, we use the data obtained from the network to display this time. When update=0, we use the data revData obtained from the server last time to display. For the image data and the returned json data stream, the data volume of the returned json data is very small.
function showUpdate(){
if (update == 1) { /*服务器有更新数据或者第一次请求update=1*/
// 显示网路数据
} else{ /*服务器没有数据更新*/
if (revData == null) { /*没有缓存*/
// 显示网络数据
} else{ /*有缓存*/
//显示缓存数据
}
}
}But there is another problem. How does the server know how many times the front end requests data, or how much is the update when the first request is made. Since I haven't done anything related to page caching, I don't know how to solve this problem. Is it possible to increase the hardware parameters of the terminal device in the interface? I feel this is possible.
The code has been synced to my github.
Update 2017.05.24
In fact, there has always been a bug in the above code. I remember that when I wrote it last year, I knew about this bug, and then it has not been modified. I still feel that it has been revised today, so I can't make a mistake.
BUG: On Android phones, when you pull down to refresh, the Loading box pulled down above is on the navigation bar. This problem does not exist on Apple phones.
Solution: Split this page into parent and child pages.
The code part is updated directly to my github