1. 程式人生 > >商品分類,主要是增加了上拉刷新功能

商品分類,主要是增加了上拉刷新功能

wip tom slist att ++ cti ket 從服務器 數據

1.用上拉刷新,大盒子必須設置overflow:auto,這樣移動端才能滑動

2.重置上拉加載

//重置上拉加載
mui(".mui-scroll-wrapper").pullRefresh().refresh(true);

3.默認第一次觸發上拉刷新

//默認第一次觸發上拉加載
mui(".mui-scroll-wrapper").pullRefresh().pullupLoading();

4.默認觸發第一個的單擊事件

//默認觸發第一個
jQuery(".productList-content .swiper-slide").eq(0).trigger("click");

5.js部分內容

//設置初始值
    var productList_index = 0;
    var productList_cat_id = 0;
    var productList_page = 1;
    // var productList_data = [];
    //頁面打開觸發第一個

    jQuery(
        ".productList-content .tophead-slide"
    ).on("click", ".swiper-slide", function() {
        productList_cat_id = jQuery(this).attr("cat_id");
        console.log(productList_cat_id);
        productList_page 
= 1; var productList_url = "http://v2.hhlme.com/wap/getGoodsList.html"; var productList_flag = false; var productList_data = []; productList_index = jQuery(this).index(); //點擊先清空前面的內容 jQuery( ".productList-content .productList-content-product-content .productList-content-product-list" ).remove();
//初始化下拉刷新 mui.init({ pullRefresh: { container: ".mui-scroll-wrapper", //待刷新區域標識,querySelector能定位的css選擇器均可,比如:id、.class等 up: { height: 200, //可選.默認50.觸發上拉加載拖動距離 auto: true, //可選,默認false.自動上拉加載一次 contentrefresh: "正在加載...", //可選,正在加載狀態時,上拉加載控件上顯示的標題內容 contentnomore: "沒有更多數據了", //可選,請求完畢若沒有更多數據時顯示的提醒內容; callback: mui_up_callback //必選,刷新函數,根據具體業務來編寫,比如通過ajax從服務器獲取新數據; } } }); function mui_up_callback() { //結束上拉刷新 var _this = this; console.log(productList_cat_id); console.log(productList_page); jQuery.getJSON( productList_url, { cat_id: productList_cat_id, page: productList_page }, function(data) { productList_data = data; jQuery( ".productList-content .productList-content-product-content .mui-pull-bottom-pocket" ).before(template("productList-arttemplate", productList_data)); productList_page++; if (productList_page > data.count) { //flag改為true讓其禁止上la刷新 productList_flag = true; productList_page = 1; // console.log(productList_page + "數據加載玩了") } //結束上拉加載,並且配置沒有了更多數據 _this.endPullupToRefresh(productList_flag | false); //結束上拉加載後,productList_flag改為false,讓其下次加載的時候可以運行下拉加載 productList_flag = false; } ); } //重置上拉加載 mui(".mui-scroll-wrapper").pullRefresh().refresh(true); //默認第一次觸發上拉加載 mui(".mui-scroll-wrapper").pullRefresh().pullupLoading(); }); //默認觸發第一個 jQuery(".productList-content .swiper-slide").eq(0).trigger("click");

商品分類,主要是增加了上拉刷新功能