WEB开发者之混合开发APP（九），商城案例--商城分类页(products.html)

最新推荐文章于 2023-05-25 15:47:38 发布

置顶 KnuthZ

最新推荐文章于 2023-05-25 15:47:38 发布

阅读量1.2k

点赞数

分类专栏：混合开发APP web开发者一步一步开发app 文章标签：混合开发商城案例产品分类 mui

本文链接：https://blog.csdn.net/knuthz/article/details/80860787

版权

web开发者一步一步开发app 同时被 2 个专栏收录

10 篇文章 1 订阅

订阅专栏

混合开发APP

9 篇文章 0 订阅

订阅专栏

由商城首页shop.html，进入商城分类页products.html的方法，已经在上一篇博文中说过，核心代码如下：

//获取商品分类id
var id = this.getAttribute("data-id");

//直接打开产品分类页面
mui.openWindow({
   url:'products.html',
   id:'products.html',
   extras:{
       pid:id
   }
});

商城分类效果图：

products.html的核心代码如下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <!-- 部分内容省略 -->
    </head>

    <body class="baisd">
        <!-- 主界面菜单同时移动 -->
        <!-- 侧滑导航根容器 -->
                <div class="box">
                <!-- 主页面标题 -->
                <header class="mui-bar mui-bar-nav header_w header_q">
                    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left jiant"></a>
                    <span class="mui-pull-right sousuoab sousuoab2"><a data-href="searchproduct.html" id="sousuo"><i class="iconfont icon-sousuo sousuo"></i></a></span>
                </header>
                <div class="height44"></div>
                <div class="height22"></div>
                <div class="container remai  ">
                <div class="swiper-container xiaodian fasten">
                    <div class="swiper-wrapper row shuxian2" id="clist">
                    </div>
                    <!-- Add Arrows -->
                </div>
            </div>

            <!-- Initialize Swiper -->
                <!-- 主页面内容容器 -->
                <ul class="mui-table-view mui-grid-view mui-media22" id="ul1">
                </ul>
              </div>
        </div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/config.js"></script>
<script type="text/javascript" charset="utf-8">
    var endflag = "0"; //点击订单状态时，页面加载数据是否结束标识. 1,结束；0，未结束。
    var detailPage = null; //详情页
    mui.init();

    //mui初始化
    mui.plusReady(function(){
        endflag = "0";
        var self = plus.webview.currentWebview();  //获取当前页面webview
        var pid = self.pid == null ? "" : self.pid;//获取传递给当前页面的参数pid,结合文章最上边的调用代码
        var keyword = self.keyword == null ? "" : self.keyword;

        //积分商城产品分类列表
        getClassification(pid,keyword);

        //预加载产品详情页面
        if(!detailPage){
            detailPage = mui.preload({
                url:'productdetail.html',
                id:'productdetail.html'
            });
        }

        //点击回到顶部
        document.querySelector('header').addEventListener('tap',function () {
            window.scroll(0, 0);
        });

        console.log("products.html加载完毕");
    });

    //bind:搜索功能
    document.getElementById("sousuo").addEventListener('tap',function(){
        var href = this.getAttribute("data-href");
        mui.openWindow({
            url:href,
            id:href,
            extras:{
                page:'products.html'
            }
        });
    });

    //bind:产品的点击事件
    $("#ul1").on('tap','a',function(){
        //获取产品id
        var id = this.getAttribute("data-id");

        //触发详情页自定义事件
        mui.fire(detailPage,'productInfo',{id:id});

        //打开详情页面
        mui.openWindow({
            id:"productdetail.html"
        });
    });

    //func:积分商城产品分类列表
    function getClassification(ids,keywords){
        mui.post(shopClassURL,{},function(data){
            if(data.success){
                var div = '';

                //放入产品分类列表
                $.each(data.data,function(i,v){
                    if(ids == v.id){
                        if(i==data.data.length-1){
                            div += '<div class="swiper-slide swiper-slide2 change"><a data-id="'+v.id+'">'+v.name+'</a></div>';
                        }else{
                            div += '<div class="swiper-slide swiper-slide2 change"><a data-id="'+v.id+'">'+v.name+'</a><span></span></div>';
                        }
                    }else{
                        if(i==data.data.length-1){
                            div += '<div class="swiper-slide swiper-slide2"><a data-id="'+v.id+'">'+v.name+'</a></div>';
                        }else{
                            div += '<div class="swiper-slide swiper-slide2"><a data-id="'+v.id+'">'+v.name+'</a><span></span></div>';
                        }
                    }
                });
                $("#clist").append(div);
                search(ids,keywords);

                var swiper = new Swiper('.remai .swiper-container', {
                    pagination: '.remai .swiper-pagination',
                    slidesPerView: 5,
                    paginationClickable: true,
                    spaceBetween: 00,
                    calculateHeight: true,
                    autoResize: true,
                    resizeReInit: true
                });

                //绑定产品分类的点击事件
                mui("#clist").on('tap','a',function(){
                    if("1" == endflag){
                        endflag = "0";
                        //高亮控制
                        $("#clist div").removeClass("change");
                        $(this).parent().addClass("change");

                        //执行查询
                        var id = this.getAttribute("data-id");
                        search(id,"");
                    }

                });
            }
        },'json');
    }

    //func:根据产品分类ID查询产品列表
    function search(ids,keywords){
        //获取对应分类的商品列表
        mui.post(shopClassProductURL,{
            "pid":ids,
            "keyword":keywords
        },function(data){
            $("#ul1").empty();
            if(data.success){
                console.log("商城产品列表输出数据:"+JSON.stringify(data));
                $.each(data.data,function(i,v){
                    var inventory = v.inventory; //库存
                    var sales_num = v.sales_num; //销量
                    var sy = parseInt(inventory) - parseInt(sales_num);
                    var li = 
                            '<li class="mui-table-view-cell mui-media mui-col-xs-6 mui-media2 mui-media2s">'xxxx</li>';
                    $("#ul1").append(li);
                });

                endflag = "1";
            }
        },'json');
    }
</script>

</body>
</html>

懂Html就能开发App，博文持续更新，博主QQ:260737830！

KnuthZ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
WEB开发者之混合开发APP（九），商城案例--商城分类页(products.html)

由商城首页，进入商城分类页的方法，已经在上一篇博文中说过，核心代码如下：//获取商品分类idvar id = this.getAttribute(&amp;amp;quot;data-id&amp;amp;quot;);//直接打开产品分类页面mui.openWindow({ url:'products.html', id:'products.html', extras:{ pid:id }});...
复制链接

扫一扫