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


    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");
  • 相关阅读:
    警告:ORA-00600 2252 错误正在SCN问题下不断爆发(转)
    Linux批量清除木马文件photo.scr
    500 OOPS: vsftpd: refusing to run with writable root inside chroot() Login failed. 421 Service not available, remote server has closed connection
    Linux后门入侵检测工具(转)
    解决Docker无法删除镜像
    通过DataX从Oracle同步数据到MySQL-安装配置过程
    Server2008 R2安装、配置Freesshd(Jenkins持续集成-Windows)
    Mysql死锁解决办法
    Mssql 2017修改master默认排序规则
    可能需要用到的Mac技巧or软件
  • 原文地址:https://www.cnblogs.com/wade1220/p/7608922.html
Copyright © 2020-2023  润新知