Html 代码
<div class="mui-content">
<div id="pullrefresh" class="mui-scroll-wrapper" style="top:40px;">
<div class="mui-scroll">
<ul id="goodsList" class="mui-table-view">
</ul>
</div>
</div>
</div>
JS代码
/**
- ===================================
- 找货JS
- ===================================
*/
AppUtils.init({
swipeBack: false,
pullRefresh: {
container: '#pullrefresh',
up: {
contentrefresh: '正在加载数据',
callback: doSearch
}
}
});
//自动刷新记时器
var timer = null;
//是否需要刷新页面
var refresh = true;
//最新的货源ID
var newGoodsId = "";
//第一个显示的货源ID
var firstGoodsId = "";
var page = 1;
var limit = 10;
//取得storage中保存的数据
var param = AppUtils.getItem("find_goods_condition");
if (AppUtils.esapeNull(param) == "") {
//storage=null的时候
param = new Object();
//定位
getLocation();
} else {
//storage中有数据时
if (AppUtils.esapeNull(param.dispatch_name) != "") {
document.querySelector("#dispatch span").innerText = AppUtils.esapeNull(param.dispatch_name);
}
if (AppUtils.esapeNull(param.receipt_name) != "") {
document.querySelector("#receipt span").innerText = AppUtils.esapeNull(param.receipt_name);
}
if (AppUtils.esapeNull(param.type) != "") {
document.querySelector("#type span").innerText = AppUtils.esapeNull(param.type);
}
if (AppUtils.esapeNull(param.length_name) != "") {
document.querySelector("#length2 span").innerText = AppUtils.esapeNull(param.length_name);
}
timer_start();
}
/**
- 自动刷新数据
/
function autoSearch() {
var tempParam = new Object();
tempParam.page = 1;
tempParam.limit = limit;
if (AppUtils.esapeNull(param.dispatch) != "" && param.dispatch != "999999") {
tempParam.dispatch = param.dispatch;
}
if (AppUtils.esapeNull(param.receipt) != "" && param.receipt != "999999") {
tempParam.receipt = param.receipt;
}
if (AppUtils.esapeNull(param.type) != "" && param.type != "不限车长") {
tempParam.type = param.type;
}
if (AppUtils.esapeNull(param.length) != "" && param.length != "0") {
tempParam.length = param.length;
}
AppUtils.ajaxPost("findgoods.mdo", tempParam, function(jsonData) {
if (jsonData.status == "OK") {
if (jsonData.rows.length > 0) {
newGoodsId = AppUtils.esapeNull(jsonData.rows[0].goodsid);
if (firstGoodsId != "" && newGoodsId != "" && firstGoodsId != newGoodsId) {
firstGoodsId = newGoodsId;
AppUtils.playSound();
}
if (refresh) {
showList(jsonData);
setTimeout(function() {
mui('#pullrefresh').pullRefresh().refresh((limit page) < jsonData.results);
mui('#pullrefresh').pullRefresh().endPullupToRefresh((limit * page) >= jsonData.results);
}, 300);
}
}
} else {
AppUtils.showAlert(data.message);
if (data.errorcode == "NEEDRELOGIN") {
AppUtils.openWindow('login.html');
}
}
}, {
noWaiting: true
});
}
/**
-
手动查询数据,用于翻页查看的情况
*/
function doSearch() {
page++;
var tempParam = new Object();
tempParam.page = page;
tempParam.limit = limit;
if (AppUtils.esapeNull(param.dispatch) != "" && param.dispatch != "999999") {
tempParam.dispatch = param.dispatch;
}
if (AppUtils.esapeNull(param.receipt) != "" && param.receipt != "999999") {
tempParam.receipt = param.receipt;
}
if (AppUtils.esapeNull(param.type) != "" && param.type != "不限车长") {
tempParam.type = param.type;
}
if (AppUtils.esapeNull(param.length) != "" && param.length != "0") {
tempParam.length = param.length;
}
AppUtils.ajaxPost("findgoods.mdo", tempParam, function(jsonData) {
if (jsonData.status == "OK") {
if (jsonData.rows.length > 0) {
showList(jsonData);
}
setTimeout(function() {
mui('#pullrefresh').pullRefresh().refresh((limit page) < jsonData.results);
mui('#pullrefresh').pullRefresh().endPullupToRefresh((limit page) >= jsonData.results);
}, 300);
} else {
AppUtils.showAlert(data.message);
if (data.errorcode == "NEEDRELOGIN") {
AppUtils.openWindow('login.html');
}
}
}, {
noWaiting: true
});
}
/**
- 显示货物列表
- @param {Object} data
*/
function showList(data) {
if (page == 1) {
//记录第一个货物的ID
firstGoodsId = AppUtils.esapeNull(data.rows[0].goodsid);
}
var ul = document.getElementById("goodsList");
var new_ul = null;
if (refresh) {
//自动刷新页面时,创建新的ul对象
new_ul = document.createElement("ul");
new_ul.setAttribute("id", "goodsList");
new_ul.setAttribute("class", "mui-table-view");
}
for (var i = 0; i < data.rows.length; i++) {
var li = showListItem(data.rows[i]);
if (refresh) {
new_ul.appendChild(li);
} else {
ul.appendChild(li);
}
}
if (refresh) {
//替换画面上原有内容
document.getElementById("pullrefresh").querySelector(".mui-scroll").replaceChild(new_ul, ul);
if (page == 1) {
mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0);
}
}
}
function showListItem(item) {
var li = document.createElement("li");
li.setAttribute("class", "mui-table-view-cell");
li.setAttribute("id", item.goodsid);
var html = '';
html += '<div>';
html += ' <span><b>';
html += item.dispatchname;
html += '→';
html += item.receiptname;
html += ' </b></span>';
if (/^([0-3])分钟$/.test(item.reducemin)) {
html += ' <span class="imgWord red">新</span>';
}
if ("1" == AppUtils.getUserInfo().auth) {
html += ' <span class="mui-pull-right"><b>';
html += item.username;
html += ' </b></span>';
}
html += '</div>';
html += '<div> ';
html += ' <span>' + createGoodsInfo(item) + '</span> ';
html += '</div> ';
if ("1" == AppUtils.getUserInfo().auth) {
html += '<div> ';
html += ' <span>席位:' + AppUtils.esapeNull(item.authdep) + AppUtils.esapeNull(item.seat) + '</span> ';
html += ' <span name="btn">';
html += ' <a name="' + item.tel + '">';
html += ' <i class="iconfont mui-pull-right" style="color: #159677; font-size:40px;"></i>';
html += ' </a>';
html += ' </span>';
html += '</div> ';
}
html += '<div > ';
html += '<span>发布时间:' + item.registdate + '</span> ';
html += '</div> ';
li.innerHTML = html;
if (li.querySelector("a") != null) {
li.querySelector("a").addEventListener('tap', function(e) {
e.stopPropagation();
AppUtils.dial(this.name);
});
}
li.addEventListener('tap', function() {
var goodsid = this.getAttribute("id");
AppUtils.openWindow("goodsSource_detailforCar.html", {
goodsid: goodsid,
fromPageType: "findgoods"
});
});
return li;
}
function createGoodsInfo(item) {
var array = new Array();
// 货物名称
array.push(item.goodsname);
// 货物单位
array.push(item.qorv);
// 车长
if (item.length != null && item.length != '' && item.length != 0) {
if (item.length != "不限车长")
array.push(item.length + '米');
}
// 车型
if (item.type != null && item.type != '' && item.type.substr(0, 2) != '不限') {
array.push(item.type);
}
// 货源信息
var goodsInfo = "";
var count = 0;
for (var j = 0; j < array.length; j++) {
if (AppUtils.esapeNull(array[j]) != "") {
if (count > 0) {
goodsInfo += "/";
}
goodsInfo += array[j];
count++;
}
}
return goodsInfo;
}
function getLocation() {
AppUtils.getGeolocation(function(r) {
try {
AppUtils.convertBaidu2GPS(r, function(point) {
var condition = "type=2";
condition += "&location=" + point.lng + "," + point.lat;
AppUtils.ajaxPost("connectloc.do", condition, function(jsonData) {
if (jsonData.status == "true") {
var dispatch_code = AppUtils.esapeNull(jsonData.code);
if (dispatch_code != "") {
if (new RegExp("^11").test(dispatch_code) || new RegExp("^12").test(dispatch_code) || new RegExp("^31").test(dispatch_code) || new RegExp("^50").test(dispatch_code)) {
dispatch_code = dispatch_code.substr(0, 2) + "0000";
}
AppUtils.ajaxPost("getprovinceinfo.do",
"searchKbn=6&code=" + dispatch_code,
function(jsonData) {
if (jsonData.result != "NG") {
dispatch_code = AppUtils.esapeNull(jsonData.code);
param.dispatch = dispatch_code;
param.dispatch_name = jsonData.name;
document.querySelector("#dispatch span").innerText = AppUtils.esapeNull(param.dispatch_name);
}
timer_start();
});
}
}
});
}, function(e) {
timer_start();
});
} catch (e) {
timer_start();
}
});
}
function timer_stop() {
clearInterval(timer);
timer = null;
}
function timer_start() {
timer_stop();
refresh = true;
page = 0;
mui('#pullrefresh').pullRefresh().pullupLoading();
timer = setInterval(autoSearch, 12000);
}
document.getElementById("dispatch").addEventListener('tap', function() {
timer_stop();
AppUtils.openWindow("city.html", {
itemType: "dispatch",
selectedCode: param.dispatch,
selectedName: param.dispatch_name,
openerx: "findgoods.html"
});
});
document.getElementById("receipt").addEventListener('tap', function() {
timer_stop();
AppUtils.openWindow("city.html", {
itemType: "receipt",
selectedCode: param.receipt,
selectedName: param.receipt_name,
openerx: "findgoods.html"
});
});
document.getElementById("type").addEventListener('tap', function() {
timer_stop();
AppUtils.openWindow("vehicle.html", {
typeItem: "type",
code: ("" == AppUtils.esapeNull(param.type) ? '不限车型' : param.type)
});
});
document.getElementById("length2").addEventListener('tap', function() {
timer_stop();
AppUtils.openWindow("vehicle.html", {
typeItem: "length2",
code: ("" == AppUtils.esapeNull(param.length) ? '0' : param.length)
});
});
window.addEventListener("reloadPrevious", function(data) {
document.getElementById("goodsList").innerHTML = "";
console.log(JSON.stringify(data.detail));
document.getElementById(data.detail.typeItem).querySelector("span").innerText = data.detail.name;
if (data.detail.typeItem == "type") {
param.type = data.detail.code;
}
if (data.detail.typeItem == "length2") {
param.length = data.detail.code;
param.length_name = data.detail.name;
}
AppUtils.setItem("find_goods_condition", param);
timer_start();
});
window.addEventListener("reloadPageAfterCity", function(data) {
document.getElementById("goodsList").innerHTML = "";
console.log(JSON.stringify(data.detail));
var showname = data.detail.name;
if (showname.length > 4) {
showname = showname.substr(0, 2) + "...";
}
document.getElementById(data.detail.itemType).querySelector("span").innerText = showname;
if (data.detail.itemType == "dispatch") {
param.dispatch = data.detail.code;
param.dispatch_name = showname;
}
if (data.detail.itemType == "receipt") {
param.receipt = data.detail.code;
param.receipt_name = showname;
}
AppUtils.setItem("find_goods_condition", param);
timer_start();
});
document.getElementById("pullrefresh").addEventListener('scrollend', function(e) {
var scrollTop = document.body.scrollTop || e.detail.y;
if (scrollTop == 0) {
page = 1;
refresh = true;
} else {
refresh = false;
}
});
document.addEventListener('pageReload', function() {
autoSearch();
});
3 个回复
DCloud_UNI_FXY
贴一下页面的完整代码
疑点颇多 (作者)
Html 代码
<div class="mui-content">
<div id="pullrefresh" class="mui-scroll-wrapper" style="top:40px;">
<div class="mui-scroll">
<ul id="goodsList" class="mui-table-view">
</ul>
</div>
</div>
</div>
JS代码
/**
*/
AppUtils.init({
swipeBack: false,
pullRefresh: {
container: '#pullrefresh',
up: {
contentrefresh: '正在加载数据',
callback: doSearch
}
}
});
//自动刷新记时器
var timer = null;
//是否需要刷新页面
var refresh = true;
//最新的货源ID
var newGoodsId = "";
//第一个显示的货源ID
var firstGoodsId = "";
var page = 1;
var limit = 10;
//取得storage中保存的数据
var param = AppUtils.getItem("find_goods_condition");
if (AppUtils.esapeNull(param) == "") {
//storage=null的时候
param = new Object();
//定位
getLocation();
} else {
//storage中有数据时
if (AppUtils.esapeNull(param.dispatch_name) != "") {
document.querySelector("#dispatch span").innerText = AppUtils.esapeNull(param.dispatch_name);
}
if (AppUtils.esapeNull(param.receipt_name) != "") {
document.querySelector("#receipt span").innerText = AppUtils.esapeNull(param.receipt_name);
}
if (AppUtils.esapeNull(param.type) != "") {
document.querySelector("#type span").innerText = AppUtils.esapeNull(param.type);
}
if (AppUtils.esapeNull(param.length_name) != "") {
document.querySelector("#length2 span").innerText = AppUtils.esapeNull(param.length_name);
}
timer_start();
}
/**
/
function autoSearch() {
var tempParam = new Object();
tempParam.page = 1;
tempParam.limit = limit;
if (AppUtils.esapeNull(param.dispatch) != "" && param.dispatch != "999999") {
tempParam.dispatch = param.dispatch;
}
if (AppUtils.esapeNull(param.receipt) != "" && param.receipt != "999999") {
tempParam.receipt = param.receipt;
}
if (AppUtils.esapeNull(param.type) != "" && param.type != "不限车长") {
tempParam.type = param.type;
}
if (AppUtils.esapeNull(param.length) != "" && param.length != "0") {
tempParam.length = param.length;
}
AppUtils.ajaxPost("findgoods.mdo", tempParam, function(jsonData) {
if (jsonData.status == "OK") {
if (jsonData.rows.length > 0) {
newGoodsId = AppUtils.esapeNull(jsonData.rows[0].goodsid);
if (firstGoodsId != "" && newGoodsId != "" && firstGoodsId != newGoodsId) {
firstGoodsId = newGoodsId;
AppUtils.playSound();
}
if (refresh) {
showList(jsonData);
setTimeout(function() {
mui('#pullrefresh').pullRefresh().refresh((limit page) < jsonData.results);
mui('#pullrefresh').pullRefresh().endPullupToRefresh((limit * page) >= jsonData.results);
}, 300);
}
}
} else {
AppUtils.showAlert(data.message);
if (data.errorcode == "NEEDRELOGIN") {
AppUtils.openWindow('login.html');
}
}
}, {
noWaiting: true
});
}
/**
手动查询数据,用于翻页查看的情况
*/
function doSearch() {
page++;
var tempParam = new Object();
tempParam.page = page;
tempParam.limit = limit;
if (AppUtils.esapeNull(param.dispatch) != "" && param.dispatch != "999999") {
tempParam.dispatch = param.dispatch;
}
if (AppUtils.esapeNull(param.receipt) != "" && param.receipt != "999999") {
tempParam.receipt = param.receipt;
}
if (AppUtils.esapeNull(param.type) != "" && param.type != "不限车长") {
tempParam.type = param.type;
}
if (AppUtils.esapeNull(param.length) != "" && param.length != "0") {
tempParam.length = param.length;
}
AppUtils.ajaxPost("findgoods.mdo", tempParam, function(jsonData) {
if (jsonData.status == "OK") {
if (jsonData.rows.length > 0) {
showList(jsonData);
}
setTimeout(function() {
mui('#pullrefresh').pullRefresh().refresh((limit page) < jsonData.results);
mui('#pullrefresh').pullRefresh().endPullupToRefresh((limit page) >= jsonData.results);
}, 300);
} else {
AppUtils.showAlert(data.message);
if (data.errorcode == "NEEDRELOGIN") {
AppUtils.openWindow('login.html');
}
}
}, {
noWaiting: true
});
}
/**
*/
function showList(data) {
if (page == 1) {
//记录第一个货物的ID
firstGoodsId = AppUtils.esapeNull(data.rows[0].goodsid);
}
var ul = document.getElementById("goodsList");
var new_ul = null;
if (refresh) {
//自动刷新页面时,创建新的ul对象
new_ul = document.createElement("ul");
new_ul.setAttribute("id", "goodsList");
new_ul.setAttribute("class", "mui-table-view");
}
for (var i = 0; i < data.rows.length; i++) {
var li = showListItem(data.rows[i]);
if (refresh) {
new_ul.appendChild(li);
} else {
ul.appendChild(li);
}
}
if (refresh) {
//替换画面上原有内容
document.getElementById("pullrefresh").querySelector(".mui-scroll").replaceChild(new_ul, ul);
if (page == 1) {
mui('.mui-scroll-wrapper').scroll().scrollTo(0, 0);
}
}
}
function showListItem(item) {
var li = document.createElement("li");
li.setAttribute("class", "mui-table-view-cell");
li.setAttribute("id", item.goodsid);
var html = '';
html += '<div>';
html += ' <span><b>';
html += item.dispatchname;
html += '→';
html += item.receiptname;
html += ' </b></span>';
if (/^([0-3])分钟$/.test(item.reducemin)) {
html += ' <span class="imgWord red">新</span>';
}
if ("1" == AppUtils.getUserInfo().auth) {
html += ' <span class="mui-pull-right"><b>';
html += item.username;
html += ' </b></span>';
}
html += '</div>';
html += '<div> ';
html += ' <span>' + createGoodsInfo(item) + '</span> ';
html += '</div> ';
}
function createGoodsInfo(item) {
var array = new Array();
// 货物名称
array.push(item.goodsname);
// 货物单位
array.push(item.qorv);
// 车长
if (item.length != null && item.length != '' && item.length != 0) {
if (item.length != "不限车长")
array.push(item.length + '米');
}
// 车型
if (item.type != null && item.type != '' && item.type.substr(0, 2) != '不限') {
array.push(item.type);
}
// 货源信息
var goodsInfo = "";
var count = 0;
for (var j = 0; j < array.length; j++) {
if (AppUtils.esapeNull(array[j]) != "") {
if (count > 0) {
goodsInfo += "/";
}
goodsInfo += array[j];
count++;
}
}
return goodsInfo;
}
function getLocation() {
AppUtils.getGeolocation(function(r) {
try {
AppUtils.convertBaidu2GPS(r, function(point) {
var condition = "type=2";
condition += "&location=" + point.lng + "," + point.lat;
AppUtils.ajaxPost("connectloc.do", condition, function(jsonData) {
if (jsonData.status == "true") {
var dispatch_code = AppUtils.esapeNull(jsonData.code);
if (dispatch_code != "") {
if (new RegExp("^11").test(dispatch_code) || new RegExp("^12").test(dispatch_code) || new RegExp("^31").test(dispatch_code) || new RegExp("^50").test(dispatch_code)) {
dispatch_code = dispatch_code.substr(0, 2) + "0000";
}
AppUtils.ajaxPost("getprovinceinfo.do",
"searchKbn=6&code=" + dispatch_code,
function(jsonData) {
if (jsonData.result != "NG") {
dispatch_code = AppUtils.esapeNull(jsonData.code);
param.dispatch = dispatch_code;
param.dispatch_name = jsonData.name;
document.querySelector("#dispatch span").innerText = AppUtils.esapeNull(param.dispatch_name);
}
timer_start();
});
}
}
});
}, function(e) {
timer_start();
});
} catch (e) {
timer_start();
}
});
}
function timer_stop() {
clearInterval(timer);
timer = null;
}
function timer_start() {
timer_stop();
refresh = true;
page = 0;
mui('#pullrefresh').pullRefresh().pullupLoading();
timer = setInterval(autoSearch, 12000);
}
document.getElementById("dispatch").addEventListener('tap', function() {
timer_stop();
AppUtils.openWindow("city.html", {
itemType: "dispatch",
selectedCode: param.dispatch,
selectedName: param.dispatch_name,
openerx: "findgoods.html"
});
});
document.getElementById("receipt").addEventListener('tap', function() {
timer_stop();
AppUtils.openWindow("city.html", {
itemType: "receipt",
selectedCode: param.receipt,
selectedName: param.receipt_name,
openerx: "findgoods.html"
});
});
document.getElementById("type").addEventListener('tap', function() {
timer_stop();
AppUtils.openWindow("vehicle.html", {
typeItem: "type",
code: ("" == AppUtils.esapeNull(param.type) ? '不限车型' : param.type)
});
});
document.getElementById("length2").addEventListener('tap', function() {
timer_stop();
AppUtils.openWindow("vehicle.html", {
typeItem: "length2",
code: ("" == AppUtils.esapeNull(param.length) ? '0' : param.length)
});
});
window.addEventListener("reloadPrevious", function(data) {
document.getElementById("goodsList").innerHTML = "";
console.log(JSON.stringify(data.detail));
document.getElementById(data.detail.typeItem).querySelector("span").innerText = data.detail.name;
if (data.detail.typeItem == "type") {
param.type = data.detail.code;
}
if (data.detail.typeItem == "length2") {
param.length = data.detail.code;
param.length_name = data.detail.name;
}
AppUtils.setItem("find_goods_condition", param);
timer_start();
});
window.addEventListener("reloadPageAfterCity", function(data) {
document.getElementById("goodsList").innerHTML = "";
console.log(JSON.stringify(data.detail));
var showname = data.detail.name;
if (showname.length > 4) {
showname = showname.substr(0, 2) + "...";
}
});
document.getElementById("pullrefresh").addEventListener('scrollend', function(e) {
var scrollTop = document.body.scrollTop || e.detail.y;
if (scrollTop == 0) {
page = 1;
refresh = true;
} else {
refresh = false;
}
});
document.addEventListener('pageReload', function() {
autoSearch();
});
DCloud_UNI_FXY
发个测试工程吧。代码太多了。单看比较费劲
疑点颇多 (作者)
算了,这本画面写的一坨屎,我打算重写了
2015-06-15 17:01
6***@qq.com
请问这个是怎么解决的? 我的现在也会报这个错误
2017-02-06 15:36