MUI-list（列表），三行列表
阿新 • • 發佈：2018-12-28
下圖是一個典型的三行列表：
結構分解：
1、外層用list，內層用grid進行分欄，
2、第一列mui-col-xs-10，用於顯示文字，第二列mui-col-xs-2，用於顯示時間
3、文字省略，在當前行增加.mui-ellipsis即可
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--標準mui.css--> <link rel="stylesheet" href="css/mui.min.css"> <!--App自定義的css--> <link rel="stylesheet" type="text/css" href="css/app.css" /> <style> .mui-table h4, .mui-table h5, .mui-table .mui-h5, .mui-table .mui-h6, .mui-table p { margin-top: 0; } .mui-table h4 { line-height: 21px; font-weight: 500; } .mui-table .oa-icon { position: absolute; right: 0; bottom: 0; } .mui-table .oa-icon-star-filled { color: #f14e41; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">三行列表</h1> </header> <div class="mui-content"> <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed"> <li class="mui-table-view-cell"> <div class="mui-table"> <div class="mui-table-cell mui-col-xs-10"> <h4 class="mui-ellipsis">資訊化推進辦公室張彥合同付款資訊化</h4> <h5>申請人：李四</h5> <p class="mui-h6 mui-ellipsis">Hi，李明明，申請交行資訊卡，100元等你拿，李明明，申請交行資訊卡，100元等你拿，</p> </div> <div class="mui-table-cell mui-col-xs-2 mui-text-right"> <span class="mui-h5">12:25</span> </div> </div> </li> <li class="mui-table-view-cell"> <div class="mui-table"> <div class="mui-table-cell mui-col-xs-10"> <h4 class="mui-ellipsis-2">資訊化推進辦公室張彥合同付款資訊化推進辦公室張彥合同付款資訊化推進辦公室張彥合同付款</h4> <h5>申請人：李四</h5> <p class="mui-h6 mui-ellipsis">Hi，李明明，申請交行資訊卡，100元等你拿，李明明，申請交行資訊卡，100元等你拿，</p> </div> <div class="mui-table-cell mui-col-xs-2 mui-text-right"> <span class="mui-h5">12:25</span> </div> </div> </li> </ul> </div> </body> <script src="js/mui.min.js"></script> <script> mui.init({ swipeBack: true //啟用右滑關閉功能 }); </script> </html>