工作日志 随手笔记 仅供参考
一 页面一开始加载的时候就提前加载页面出来 然后下载滚动的时候 每次加载10个 然后判断接口返回的数据 的长度 当长度小于10 的时候 表示没有更多的数据 停止下拉加载
html, body {
height: 100%;
}
.scroll-container{
overflow-y: scroll;
height: 100%;
}
<div class="scroll-container">
<div class="scroll-inner" style="min-height: 101%">
{{--轮播图--}}
<div class="swiper-container"></div>
{{--分类导航--}}
<div class="list_content"></div>
{{--默认排序--}}
<div class="list_content2">
<div class="list_item active" data-id="1">默认排序</div>
<div class="list_item" data-id="2">最新上拍</div>
<div class="list_item" data-id="3">即将结拍</div>
</div>
{{--商品内容--}}
<div class="section">
<div class="msg">
</div>
<div class="weui-loadmore loading">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips">正在加载</span>
</div>
<div class="weui-loadmore weui-loadmore_line" style="display: none">
<span class="weui-loadmore__tips no_more">没有更多了</span>
</div>
</div>
</div>
</div>
<script type="text/html" id="section">
{MBTS if data.length == 0 MBTE}
<div class="no_data">暂无数据</div>
{MBTS else MBTE}
{MBTS each data MBTE}
<div class="section_list" data-url="{MBTS $value.detail_url MBTE}">
<div class="list_img">
<img src="{MBTS $value.pic MBTE}" alt="">
</div>
<div class="list_title">
<div class="title_text">{MBTS $value.description MBTE}</div>
<div class="title_text ">
{MBTS if $value.status == 0 MBTE}
<span> 未成交</span>
{MBTS else if $value.status == 1 MBTE}
<span> 已成交</span>
{MBTS else if $value.status == 2 MBTE}
<span> 已成交</span>
{MBTS else if $value.status == 3 MBTE}
<span> 流拍</span>
{MBTS /if MBTE}
</div>
<div class="title_text">
<span>
当前出价 : ¥{MBTS $value.step MBTE}元
</span>
</div>
<div class="list_img2">
<img src="{MBTS $value.user.avatar MBTE}" alt="">
</div>
</div>
</div>
{MBTS /each MBTE}
{MBTS /if MBTE}
</script>
var page = 1; //从第一页开始加载
var page_size = 8; //每次加载8个
var category_id = '';//分类
var state = '';//排序
var loading = false; //状态标记
var tplDrawing = function(cfg){
$(".loading").css("display", "block");//显示正在加载
$(".weui-loadmore_line").css("display", "none");//隐藏暂无数据
$(".weui-loadmore_line").html('没有更多了');
loading = true;
//列表
Ajax({
url: "{{route("site.auction.list")}}",
data: {
state:cfg.state,
app_id: 2,
category_id:cfg.category_id,
page_size:cfg.page_size,
page:cfg.page
},
type: "POST",
success: function (res) {
console.log(res);
if (res.code == 1){
var section = "section";
var tem_section = template(section, res.result);
$(".msg").append(tem_section);
// 计算商品宽度
var width = window.screen.width;
var goods_w = (width - 8) / 2;
$(".section_list").css("width", goods_w + "px");
$(".list_img").css("width", goods_w + "px");
$(".list_img").css("height", goods_w + "px");
if (res.result.data.length == 0) {
if (page == 1) {
$(".loading").css("display", "none");//显示正在加载
$(".weui-loadmore_line").css("display", "none");//隐藏暂无数据
loading = true;
} else {
$(".loading").css("display", "none");//显示正在加载
$(".weui-loadmore_line").css("display", "block");//隐藏暂无数据
loading = true;
$(".no_data").css("display","none")//隐藏暂无数据
}
} else {
loading = false;
if (res.result.data.length < page_size) {
$(".loading").css("display", "none");//显示正在加载
$(".weui-loadmore_line").css("display", "block");//隐藏暂无数据
loading = true;
}
}
page++
} else {
loading = true;
$(".loading").css("display", "none");//隐藏正在加载
$(".weui-loadmore_line").css("display", "block")//显示暂无数据
$(".weui-loadmore_line").html('数据异常')
}
}
})
};
// 贴吧分页加载
tplDrawing({
category_id: '',
page: 1,
page_size: 8,
state: ''
});
$(".scroll-container").infinite().on("infinite", function () {
// console.log(1111);
if (loading) return;
loading = true;
var cfg = {
category_id: category_id,
page: page,
page_size: page_size,
state: state
}
tplDrawing(cfg);
});
//点击分类切换列表
$(document).on("click",'.scroll_item_li',function () {
$(this).addClass('active');
$(this).siblings().removeClass('active');
category_id = $(this).data("id"); //分类id
$(".msg").html(""); //清空模板
page = 1;//重新从第一页开始加载
var cfg = {
category_id: category_id,
page: page,
page_size: page_size,
state: state
};
tplDrawing(cfg);
});
// 点击切换排序
$(document).on("click",".list_item",function () {
$(this).addClass('active');
$(this).siblings().removeClass('active');
state = $(this).data("id"); //排序id
$(".msg").html(""); //清空模板
page = 1; //重新从第一页加载
var cfg = {
classify_id: category_id,
page: page,
page_size: page_size,
state: state
};
tplDrawing(cfg);
});
写的不好 不懂得可以加Q 747809088