HTML5滚动加载

2022-08-03 17:59:13

@using YoSoft.DSM.YoDSMModel;
@using YoSoft.DSM.YoDSMBLL;
@{
Layout = "~/Views/Shared/_LayoutCompanySend.cshtml";
ViewBag.Title = "";
}
@*<link href="~/Content/person.css" rel="stylesheet" />*@
<style>

ul {
/*display: flex;*/
}

li {
position: relative;
}

#containermain {
/*margin-bottom:60px;*/
}

footer {
/*display:none;*/
}
</style>
<div class="middle-form">
<div class="weui_cell weui_cell_select weui_select_after" style="width:50%;float: left">
<div class="weui_cell_bd weui_cell_primary">
<select class="selectpicker" id="ddl_GuestName" style="width:100%">
<option value="" style="">请选择经销商</option>
@if (ViewBag.Products.Count > 0)
{
foreach (GL_GuestInfo p in ViewBag.GuestID)
{
<option value="@p.cID" style="">@p.cGuestName</option>
}
}
</select>
</div>
</div>
<div class="weui_cell weui_cell_select weui_select_after" style="width:50%;float: left">
<div class="weui_cell_bd weui_cell_primary">
<select class="selectpicker" id="ddlproduct" style="width:100%">
<option value="" style="">请选择产品</option>
@if (ViewBag.Products.Count > 0)
{
foreach (GL_GoodsInfo p in ViewBag.Products)
{
<option value="@p.cID" style="">@p.cGoodsName</option>
}
}
</select>
</div>
</div>
</div>
<div class="middle-form">
<div id="datePlugin" style="width: 50%;float: left">
<input type="text" readonly="" class="selectpicker select-input" id="txtStartDate" style="width: 100%;" name="txtStartDate" placeholder="请输入开始日期" data-lcalendar="2000-01-01,2099-12-31" />
</div> <div id="datePlugin1" style="width: 49%;float: left">
<input type="text" readonly="" class="selectpicker select-input" id="txtEndDate" style="width: 100%;" name="txtEndDate" placeholder="请输入结束日期" data-lcalendar="2000-01-01,2099-12-31" />
</div>
</div>

<div class="middle-form" style="display:none">
<button type="button" id="btn-query" class="btn btn-primary">查询</button>
</div>
<div id="containermain" class="">
<table id="tbSendList">
<thead class="thead-dark">
<tr>
<th>商品名称</th>
<th>数量</th>
</tr>
</thead>
<tbody style="height:100%;"></tbody>
</table>
<p id="mgsdone" style="display:none;padding:10px 0px;color:#AAA;font-weight:bold;text-align:center;">不要再刷啦，我是有底线的。</p>
</div>
<footer>
<div class="container-fluid navbar navbar-default navbar-fixed-bottom text-center nav-container" style="height:35px">
<div style="width: 50%;float: left;background-color:#0fcd77;font-size:18px">合计</div>
<div style="width: 50%;float: left;font-size:18px"><a id="RecordCount" style="font-size:18px">数量：0</a></div>
</div>
</footer>
<script src="~/Scripts/Person/companysend.js"></script>
<script>

</script>

var CurrentPageIndex = 1;
var PageCount = 0;
var RecordCount = 0;
var PageSize = 10;
var startY = 0;
var endY = 0;
var queryDone = true;
var bShow = false;
$(function () {
$("#mgsdone").hide();
var calendar0 = new LCalendar();
calendar0.init({
'trigger': '#txtStartDate',//标签id
'type': 'date',//date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择
'minDate': '2000-01-01',//最小日期注意：该值会覆盖标签内定义的日期范围
'maxDate': '2099-12-31'//最大日期注意：该值会覆盖标签内定义的日期范围
});

var calendar1 = new LCalendar();
calendar1.init({
'trigger': '#txtEndDate',//标签id
'type': 'date',//date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择
'minDate': '2000-01-01',//最小日期注意：该值会覆盖标签内定义的日期范围
'maxDate': '2099-12-31'//最大日期注意：该值会覆盖标签内定义的日期范围
});

$("#btn-store").click(function () {
$("#modalstore").modal("show");
});
$("#btn-product").click(function () {
$("#modalproduct").modal("show");
});
$("#btn-date").click(function () {
$("#modaldate").modal("show");
});

$("select").change(function () {
var selectVal = $(this).val();
var id = $(this).attr("id");
console.log(selectVal);
$("#" + id + " option[selected='selected']").each(function () {
//console.log(this);
if ($(this).attr("value") != selectVal) {
$(this).removeAttr("selected");
}
});

$(this).find("option[value='" + $(this).val() + "']").attr("selected", true);
CurrentPageIndex = 1;
PageCount = 0;
RecordCount = 0;
$("#mgsdone").hide();
bShow = false;
});

$("#txtStartDate").change(function () {
CurrentPageIndex = 1;
PageCount = 0;
RecordCount = 0;
alert(433443);
$("#mgsdone").hide();
bShow = false;
});

$("#txtEndDate").change(function () {
CurrentPageIndex = 1;
PageCount = 0;
RecordCount = 0;
alert(433443);
$("#mgsdone").hide();
bShow = false;

});

$("#btn-query").click(function () {
console.log('查询', CurrentPageIndex, RecordCount, PageCount);
CurrentPageIndex = 1;
PageCount = 0;
RecordCount = 0;
queryData();
$("#mgsdone").hide();
bShow = false;
});

//$(window).scroll(function () {
// var scrollTop = $(this).scrollTop(),
// scrollHeight = $(document).height(),
// windowHeight = $(this).height();
// var positionValue = (scrollTop + windowHeight) - scrollHeight;
// console.log(scrollTop, scrollHeight, windowHeight, positionValue)
// if (positionValue == 0) {
// console.log("加载");
// //do something
// }
//});
$("#containermain").on("touchstart", function (e) {
//if (e.cancelable) {
// if (!e.defaultPrevented) {
// e.preventDefault();
// }
//} 这几行不要，否则会影响滑动时的滚动惯性
startY = e.touches[0].clientY;
});

$("#containermain").on("touchend", function (e) {
//if (e.cancelable) {
// if (!e.defaultPrevented) {
// e.preventDefault();
// }
//}这几行不要，否则会影响滑动时的滚动惯性
endY = e.originalEvent.changedTouches[0].clientY,
Y = endY - startY;

//下滑
if (Y > 0) {
//$(document).scrollTop($(document).scrollTop() - Y);
console.log('下滑');
//if ($(document).scrollTop() > 0 && $(document).scrollTop() >= $(document).height() - $(window).height()) {
// console.log("滚动条已经到达底部为" + $(document).scrollTop(), ($(document).height() - $(window).height()), $(document).height(), $(window).height(),startY, endY,CurrentPageIndex);
//}
}
//上滑
else if (Y < 0) {
$(document).scrollTop($(document).scrollTop() - Y + 1);
//alert($(document).scrollTop() - Y);
//alert($(document).scrollTop());
//alert($(document).height() - $(window).height());
//console.log('上滑', $(document).scrollTop(), ($(document).height() - $(window).height()), CurrentPageIndex, RecordCount, PageCount, Y);

console.log('上滑', CurrentPageIndex, PageCount, queryDone);
if ($(document).scrollTop() > 0 && $(document).scrollTop() >= $(document).height() - $(window).height() && CurrentPageIndex <= PageCount) {
scrollLoad();
$(document).scrollTop($(document).height());
}
else if (CurrentPageIndex > PageCount & !bShow) {
bShow = true;
$("#mgsdone").show();
$(document).scrollTop($(document).height());
}

}
//单击
else {
console.log('单击', CurrentPageIndex);
//queryData();
}
});
queryData();
});

$('#ddl_GuestName,#ddlproduct').on('change', function () {
queryData();
});
function queryData() {
if (!queryDone || (CurrentPageIndex > PageCount && CurrentPageIndex > 1)) {
return;
}
queryDone = false;
var store = $("#ddlstore").val();
var product = $("#ddlproduct").val();
var guestid = $("#ddl_GuestName").val();
var startDate = $("#txtStartDate").val();
var endDate = $("#txtEndDate").val();
$("#tbSendList tbody").empty();
//console.log(CurrentPageIndex , PageCount)
$.ajax({
url: "/Person/SendList",
type: "post",
data: { store: store, product: product, startDate: startDate, endDate: endDate, PageSize: PageSize, CurrentPageIndex: CurrentPageIndex, guestid: guestid },
dataType: "json",
async: false,
success: function (data) {
//console.log(data);
//console.log($("#tbSendList tbody"));
RecordCount = data.RecordCount;
PageCount = parseInt(RecordCount / PageSize) + 1;
var iNum = 0;
var html = "";
if (data.success) {
var list = JSON.parse(data.sendlist);
console.log(list)
for (var i in list) {
html += "<tr><td>" + list[i].cGoodsName + "</td><td>" + list[i].iNum + "</td></tr>"
iNum += parseInt(list[i].iNum);
}
$('#RecordCount').text("数量：" + iNum);
$("#tbSendList tbody").html(html);
if (list.length > 0) {
CurrentPageIndex++;
}
}
else {
$("#tbSendList tbody").html('<tr><td colspan="2">没有数据</td></tr>');
}
queryDone = true;
},
error: function (err) {
console.log(err);
queryDone = true;
}

});
}

});
}

码农公寓

相关文章