商品列表頁 · APP模塊

# 商品列表頁 ![](https://box.kancloud.cn/2016-08-25_57beacf0dc55a.png) 相關代碼如下： ``` <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> <meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> <link rel="stylesheet" type="text/css" href="../../../css/aui.css" /> <style type="text/css"> .slider { margin-bottom: 0; } .slider img { width: 100%; height: 120px; display: inherit; } .aui-grid-sixteen:after { border:none; } .aui-grid-sixteen li:after { border:none; } .aui-grid-sixteen li .aui-iconfont { color: #ffffff; width: 38px; height: 38px; line-height: 38px; border-radius: 50%; font-size: 20px; } p.goods-title { font-size: 1em; color: #333; } p.goods-info { font-size: 12px; color: #999; } .aui-line-x { margin: 5px 0; } .aui-line-x:after { border-color: #ddd; } .goods-price { font-size: 0.875em; } .goods-price strong { margin:0 5px; font-size: 16px; } </style> </head> <body> <div class="aui-content slider"> <img src="./image/d5.png" /> </div> <div class="aui-content"> <ul class="aui-grid-sixteen"> <li class="aui-col-xs-3 aui-text-center"> <span class="aui-iconfont aui-icon-profilefill aui-bg-success"></span> <p>全部商品</p> </li> <li class="aui-col-xs-3 aui-text-center"> <span class="aui-iconfont aui-icon-creativefill aui-bg-warning"></span> <p>積分兌換</p> </li> <li class="aui-col-xs-3 aui-text-center"> <span class="aui-iconfont aui-icon-apps aui-bg-danger"></span> <p>新品促銷</p> </li> <li class="aui-col-xs-3 aui-text-center"> <span class="aui-iconfont aui-icon-countdownfill aui-bg-info"></span> <p>熱門推薦</p> </li> </ul> </div> <div class="aui-content"> <ul class="aui-list-view aui-grid-view"> <li class="aui-list-view-cell aui-img aui-col-xs-6" tapmode onclick="openGoods()"> <img class="aui-img-object" src="../../../image/demo1.png"> <div class="aui-img-body aui-text-left"> 商品名稱商品名稱商品名稱商品名稱 <p> <span class="goods-price aui-text-danger">￥<strong>88.88</strong>元</span> </p> <p class="goods-info"> 共售出<span class="aui-text-danger">88</span>件 </p> </div> </li> <li class="aui-list-view-cell aui-img aui-col-xs-6" tapmode onclick="openGoods()"> <img class="aui-img-object" src="../../../image/demo1.png"> <div class="aui-img-body aui-text-left"> 商品名稱商品名稱商品名稱商品名稱 <p> <span class="goods-price aui-text-danger">￥<strong>88.88</strong>元</span> </p> <p class="goods-info"> 共售出<span class="aui-text-danger">88</span>件 </p> </div> </li> <li class="aui-list-view-cell aui-img aui-col-xs-6" tapmode onclick="openGoods()"> <img class="aui-img-object" src="../../../image/demo1.png"> <div class="aui-img-body aui-text-left"> 商品名稱商品名稱商品名稱商品名稱 <p> <span class="goods-price aui-text-danger">￥<strong>88.88</strong>元</span> </p> <p class="goods-info"> 共售出<span class="aui-text-danger">88</span>件 </p> </div> </li> <li class="aui-list-view-cell aui-img aui-col-xs-6" tapmode onclick="openGoods()"> <img class="aui-img-object" src="../../../image/demo1.png"> <div class="aui-img-body aui-text-left"> 商品名稱商品名稱商品名稱商品名稱 <p> <span class="goods-price aui-text-danger">￥<strong>88.88</strong>元</span> </p> <p class="goods-info"> 共售出<span class="aui-text-danger">88</span>件 </p> </div> </li> </ul> </div> </body> <script type="text/javascript" src="../../../script/api.js"></script> <script type="text/javascript"> apiready = function(){ api.parseTapmode(); } function openGoods(){ var delay = 0; if(api.systemType != 'ios'){ delay = 300; } api.openWin({ name: 'goods_show_win', url: 'goods_show_win.html', bounces: false, delay:delay }); } </script> </html> ```