h5使用模块模板，循环输出模块列表

博主使用freemarker为框架，不过不影响功能的说明，首先来看看成品效果图

然后是html

[#import "/common/layout.ftl" as layout]

[@layout.head title="支付页"]
<link rel="stylesheet" href="/assets/css/chrematistics/gaohuitongDeposit.css">


[/@layout.head]

[@layout.body]
    <div class="container funding--container">
        <div id="title-msg" >
            <div id ="rule-msg">
                <img src="./assets/images/chrematistics/mark.png" />
                <label class="mon1-detals">美国反洗钱法要求到账起60天内不可取款</label> 
            </div>
            <div id ="card-msg">
                <img src="./assets/images/chrematistics/pay_icon.png" />
                <label class="mon1-detals">使用中国境内银行卡安全支付</label> 
            </div>
        </div>
        
        <div id="bankcards" >
                <lu class="bankcard-layout">
                    <li id={$bankinfoid} class={$display} value={$bankdata} >
                        <div class="bankcard-icon-div">
                           <img src={$bankcardIcon} />
                        </div>
                        <div class="column-info">
                                <p class="bank-name">{$name}</p>
                                <p class="bank-num">
                                  {$number}
                                </p>
                         </div>
                         <div class="bankcard-goin-div">
                            <img id ="bankcard-goin" src="./assets/images/chrematistics/bankcard_right.png" />
                         </div>
                    </li>
                </lu>
                <div id="footer">
                    <div class="bankcard-item-add">
                        <img src="./assets/images/chrematistics/bankcard_pay_new.png" />
                        <span class="bank-add-msg">使用新卡</span>       
                    </div>
                </div>
        </div>
    </div>
<script src="../../project-h5/intoGold/js/zepto.min.js"></script>
<script src="../../project-h5/common/js/bridge.js"></script>
<script src="/assets/js/common/public.js"></script>
<script src="/assets/js/chrematistics/gaohuitongDeposit.js"></script>
[/@layout.body]

css：

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
th,
sub,
sup,
tt,
var,
b,
label,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

* {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

hr {
    border: none;
    border-bottom: 1px solid #e4e5e7;
    margin: 0.92308em 0;
}

@media (min- 750px) {
    hr {
        margin: 3.07692em 0;
    }
}

html {
    font-size: 13px;
}

@media (min- 750px) {
    html {
        font-size: 14px;
    }
}

@media (min- 970px) {
    html {
        font-size: 16px;
    }
}

@media (min- 1170px) {
    html {
        font-size: 16px;
    }
}

body,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="range"],
input[type="search"],
input[type="tel"],
textarea,
select,
.checkbox,
.radio {
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    color: #798088;
    line-height: 1.5;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

body {
    background-color: #f8f8f9;
}

::-moz-selection {
    background: #C0C8D2;
    color: white;
}

::selection {
    background: #C0C8D2;
    color: white;
}

.single-line {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

b,
label,
strong,
th {
    color: #60666c;
    font-weight: 700;
}

small {
    font-size: 0.92308em;
    color: #93999f;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: #484c51;
    line-height: 1.3;
    margin-top: 1.07692em;
    margin-bottom: 0.46154em;
    -webkit-font-smoothing: subpixel-antialiased;
}

h1.-no-top-spacing,
h2.-no-top-spacing,
h3.-no-top-spacing,
h4.-no-top-spacing,
h5.-no-top-spacing,
h6.-no-top-spacing {
    margin-top: 0;
}

h1 {
    font-size: 1.84615em;
    font-weight: 300;
    color: #303336;
}

h2 {
    font-size: 1.38462em;
}

h3 {
    font-size: 1.23077em;
}

h4 {
    font-size: 1.07692em;
}

h5 {
    font-size: 1em;
}

h6 {
    font-size: 0.92308em;
    text-transform: uppercase;
}

@media (min- 750px) {
    h1 {
        font-size: 2.76923em;
    }
    h2 {
        font-size: 2em;
    }
    h3 {
        font-size: 1.69231em;
    }
    h4 {
        font-size: 1.46154em;
    }
    h5 {
        font-size: 1.23077em;
    }
    h6 {
        font-size: 1.07692em;
        text-transform: uppercase;
    }
}

p {
    margin: 0.61538em 0;
}

a {
    color: #3FBA9A;
    text-decoration: none;
    font-weight: 700;
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

ul,
ol {
    margin: 0.61538em 0;
    padding-left: 0.53846em;
}

ul li {
    list-style-type: disc;
    margin: 0 0;
}

ol li {
    list-style-type: decimal;
    margin: 0 0;
}

code {
    background-color: #f8f8f9;
    border: 1px solid #ebebec;
    padding: 0.30769em 0.46154em;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.92308em;
    color: #54595f;
}

pre code {
    display: block;
}

pre {
    margin: 0.92308em 0;
}

input,
textarea,
keygen,
select,
button {
    font-size: 1em;
}

header {
    background-color: #FEC109;
    color: #fff;
    position: relative;
}

header .logo {
    float: left;
    text-indent: -9999px;
}

header nav {
    width: 100%;
    width: calc(100% + 1.53846em);
    margin-left: -0.76923em;
    background-color: #e4ad08;
    max-height: 0;
    overflow: hidden;
    -webkit-transition: 0.3s ease max-height;
    transition: 0.3s ease max-height;
}

header nav ul {
    padding: 0.61538em 0;
    margin: 0;
}

header nav li {
    margin: 0;
    padding: 0;
}

header nav a {
    color: #fff4d4;
    text-decoration: none;
    font-size: 1.07692em;
    display: block;
    padding: 0.42857em 0.76923em;
    text-align: center;
}

header nav a.btn {
    margin: 0.30769em 0.76923em;
    width: auto;
}

@media (min- 750px) {
    header nav {
        width: 100%;
        margin: 0;
        background-color: transparent;
        max-height: none;
        -webkit-transition: none;
        transition: none;
        position: absolute;
        top: 0;
        height: 4rem;
        text-align: right;
    }
    header nav ul {
        padding: 0;
    }
    header nav li {
        display: inline-block;
        line-height: 4rem;
    }
    header nav a {
        font-size: 1em;
        display: inline-block;
        padding-top: 0;
        padding-bottom: 0;
    }
    header nav a.btn {
        margin: 0;
        padding: 0.66667em 1.2em;
        line-height: 1.5;
        vertical-align: baseline;
    }
}

@media (min- 750px) {
    header:after {
        content: "";
        display: table;
        clear: both;
    }
    header .logo {
        float: left;
    }
    header nav {
        float: right;
    }
}

#title-msg {
    width: 100%;
    text-align: center;
}

#rule-msg {
    width: 100%;
    height: auto;
    padding: 15px 0;
    font-size: 14px;
    color: #666666;
    background: #f2e2cb;
    text-align: center;
    margin: 0 auto;
}

#rule-msg label {
    vertical-align: middle;
    font-size: 12px;
    color: #f36d00;
}

#rule-msg img {
    height: 12px;
    vertical-align: middle;
}

#card-msg {
    width: 100%;
    padding: 15px 0;
    font-size: 14px;
    color: #666666;
    text-align: center;
    margin: 0 auto;
}

#card-msg label {
    vertical-align: middle;
    font-size: 14px;
    color: #666666;
}

#card-msg img {
    height: 18px;
    vertical-align: middle;
}

.bankcard-layout {
  }

#bankcard-item-default {

}

#bankcard-icon {
    float: left;
    width: 40px;
    height: 40px;
    padding-top: 22px;
}

.column-info {
    width: 76%;
    height: auto;
    text-align: left;
    padding-top: 22px;
    padding-bottom: 22px;
}

#bankcard-goin {
    float: right;
    width: 12px;
    padding-top: 22px;
}

.horizontalcenter.show{
    height: 100px;
    width: 80%;
    padding-right: 16px;
    padding-left: 16px;
    text-align: center;
    margin: 0 auto;
    background: -webkit-linear-gradient(left, #45bbff, #4da0fc);
    border-radius: 10px;
    margin-bottom: 20px;

    display: -moz-box;
    display: -webkit-box;
    display: -o-box;
    display: box;
    -moz-box-pack: justify;
    -webkit-box-pack: justify;
    -o-box-pack: justify;
    box-pack: justify
}

.horizontalcenter.hidden{
    display: none;
}

.bank-name{
    color: #fff;
    size: 15px;
    padding-bottom: 6px;
    margin-right: 30px;
    margin-left: 12px;
    border-bottom: 1px solid #fff;
}
.bank-num {
    color: #fff;
    size: 15px;
    margin-left: 12px;
}

.bankcard-item-add {
    width: 80%;
    height: 100px;
    padding-right: 16px;
    padding-left: 16px;
    text-align: center;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e4e5e7;
    line-height: 100px;
}

.bankcard-item-add img {
    width: 6%;
    display: inline-block;
    position: relative;
    top: 6px;
}
.bankcard-icon-div img{
    width: 50px;
    margin-top: 20px;
}
.bankcard-item-add p {
    display: inline-block;
}
.bankcard-item-add span{
    color: #009dff;
}
#footer{
    margin-top: 20px;
}

js：

(function (window) {
    //canvas and register
    var bankcardItemAdd, bankcards, bankcardLayout, bankcardIcon, bankName, bankNum, userId, token,saveMoney, template,dataList;


    var parseDom = function () {
        bankcardItemAdd = document.querySelector('.bankcard-item-add');//添加银行卡布局
        bankcards = document.querySelector('.bankcards');//银行s卡栏

        bankcardLayout = $(".bankcard-layout");//默认银行卡栏-带下边距
        template = bankcardLayout.html();

        userId = common.GetQueryString("userId");
        token = common.GetQueryString("token");
        saveMoney = common.GetQueryString("saveMoney");
    }


    function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
            window.onload = function () {
                oldonload();
                func();
            }
        }
    }


    function btnEvent() {
        bankcardItemAdd.addEventListener('tap', function (e) {
            window.location.href = "/addBankCard?userId=" + userId + "&token=" + token;
        });
    }


    var getUserAssetInfo = function (event) {
        var params = {
            "data": JSON.stringify({
                //构建数据
            })
        }
        params.data = common.base64ecode(params.data);
        $.ajax({
            type: "post",
            url: "//url",
            data: params,
            async: true,
            success: function (data) {
                if (!data) {
                    return;
                }
                 
                data = typeof(data) == "string" ? JSON.parse(data) : data;
                if (data.header.respCode == 1) {
                    var form_list;
                    dataList = data.body.bankCardList;
                    template.replace(/{$display}/gi, "horizontalcenter hidden");//设置模板class为隐藏的

                    for (key in dataList) {
                        form_list = template;
                        form_list = form_list.replace(/{$display}/gi, "horizontalcenter show ");
                        form_list = form_list.replace(/{$bankinfoid}/gi, "bankcard-item-default-"+key);
                        form_list = form_list.replace(/{$icon}/gi, dataList[key].logoUrl);
                        form_list = form_list.replace(/{$name}/gi, dataList[key].bankName);
                        form_list = form_list.replace(/{$number}/gi, dataList[key].accountNo);
                        form_list = form_list.replace(/{$bankcardIcon}/gi, dataList[key].logoUrl);
                        form_list = form_list.replace(/{$bankdata}/gi, key);

                        bankcardLayout.append(form_list);
                        var bankitem = document.getElementById('bankcard-item-default-'+key);
                        bankitem.addEventListener("tap",function(){
                            pay(this.getAttribute("value"));
                        },false);
                    }
                    document.getElementById('{$bankinfoid}').setAttribute("style", "display:none");
                } else {
                    alert(data.header.errorMsg)
                }
            },
            error: function (e) {
                alert("操作失败" + e);

            }

        })
    }


    var pay = function (bankdata) {
        //验证密码入口，打开Native代码
        var t = dataList[bankdata];
        var dataSend = {
            "cmd": 'verifyLogined',
            "time": new Date().getTime(),
            "data": {
                "dialogCheckBean": t,
                "injectMoney":saveMoney
            }
        };
        if (utilBridge !== undefined) {
            utilBridge.send(dataSend, function (responseData) {
            });
        }
        return;
    }


    var toPayPag = function () {
        window.location.href = "http://www.baidu.com";
    }


    var bindListener = function () {

        bankcardItemAdd.addEventListener('tap', function (event) {
            var e = event || window.event;
            if (e.stopPropagation) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }
            if (verificationValue)
                toPayPag();
        }, false);
    }


    var init = function () {
        parseDom();
        bindListener();
        getUserAssetInfo();
        addLoadEvent(btnEvent);//等到页面内包括图片的所有元素加载完毕后才能执行
    }
    init();
})(window);//在页面DOM文档加载完成后加载执行的，等效于$(document).ready(function(){...}); 优于window.onload