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

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

2.重置上拉加載html

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

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

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

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

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

5.js部份內容app

//設置初始值
    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");
相關文章
相關標籤/搜索