码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2017-09-29 00:39:45      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:.com   服务器   选择   overflow   ...   url   page   自动   dsl   

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");

 

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

标签:.com   服务器   选择   overflow   ...   url   page   自动   dsl   

原文地址:http://www.cnblogs.com/wade1220/p/7608922.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!