點選切換頁面 分頁載入 懶載入
阿新 • • 發佈：2018-12-27
工作日誌 隨手筆記 僅供參考
一 頁面一開始載入的時候就提前載入頁面出來 然後下載滾動的時候 每次載入10個 然後判斷介面返回的資料 的長度 當長度小於10 的時候 表示沒有更多的資料 停止下拉載入
<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");//隱藏暫無資料 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