Weex系列（2）-自定义TableViewCell

直接上代码

<!--

订单记录 Cell

-->
<template>
    <div class="container">
        <div class="blank"> </div>
        <!--循环创建 label-->
       <div class="rowitem" v-for="data in DataList" :key="key">
           <text class="titleLabel">{{data.titleLabel}}</text>
           <text class="contentLabel">{{data.content}}</text>
       </div>

        <div class="blank"> </div>
        <div class="sepline"> </div>  <!--分隔线-->
    </div>

</template>

<style scoped>

    .blank
    {
        top: 0px;
        height: 5px;
        width: 750px;
    }

    .container{
        top: 0px;
        height: 360px;
        width: 750px;
        left: 0px;
        flex-direction: column;
        justify-content: center;
    }

    .rowitem{

        top: 0px;
        width: 750px;
        height: 50px;
        flex-direction: row;
        /*justify-content: center;*/
        /*align-items: center;*/
    }



    .titleLabel{

        width: 200px;
        text-align: left;
        font-size: 28px;
        color: rgb(62,67,70);
        left: 20px;
        line-height: 50px;
    }

    .contentLabel {
        font-size: 28px;
        color: rgb(62,67,70);
        line-height: 50px;
        right: 0px;
        text-align: left;
    }

    /*cell分割线*/
    .sepline{
        height: 1px;
        width: 750px;
        top: 359px;
        left: 0px;
        background-color: #e4e4e4;
        position: absolute;
    }

</style>

<script>

    export default{

        /*属性列表*/
        props: {
            /*订单号*/
            orderNo: {
                type: String,
                default: "USBL4562W8UX34PE7GC3WEM1"
            },
            /*电话*/
            phoneNumber: {
                type: String,
                default: "13888888888"
            },
            /*地址*/
            address: {
                type: String,
                default: "xxxxxxxxx"
            },
            /*状态*/
            statuscode: {
                type: String,
                default: "成功"
            },
            /*下单时间*/
            orderTime: {
                type: String,
                default: "2017-11-30 11:45:03"
            },
            /*消费金额*/
            costAmount: {
                type: String,
                default: "100"
            },
            /*剩余金额*/
            remainAmount: {
                type: String,
                default: "0"
            },
        },

        data(){
            return {

                DataList:[
                    {titleLabel:'订单号:',content:this.orderNo},
                    {titleLabel:'电话:',content:this.phoneNumber},
                    {titleLabel:'地址:',content:this.address},
                    {titleLabel:'状态:',content:this.statuscode},
                    {titleLabel:'下单时间:',content:this.orderTime},
                    {titleLabel:'消费金额:',content:this.costAmount},
                    {titleLabel:'剩余金额:',content:this.remainAmount}
                    ]
}
        },
        methods: {},

    }

</script>

使用

<!--订单记录-->
<template>

    <div class="container">

        <!--list-->
        <list class="list">
            <cell class="cell"  v-for="(data,index) in Data" :key="Data" @click="ClickCell(index)">
                <ordercell class="ordercell">

                </ordercell>
            </cell>
        </list>
    </div>

</template>

<style scoped>


    .container {
        flex: 1;
        width: 750px;
        position: relative;
    }

    .list {
        width: 750px;
        flex-direction: column;
        flex: 1;
        position: relative;
    }



    .cell {
        background-color: white;
        width: 750px;

    }


</style>

<script>

    import ordercell from './ordercell.vue';

    export default {
        components: {ordercell},

        data() {

            return {

                SetTitleText: "订单记录",
                Data: [1, 1, 1, 1, 1, 1, 1, 1],

            }

        },

        methods: {

            ClickCell(index)
            {

            },


        }
    }

</script>

效果图：

Simulator Screen Shot - iPhone 8 - 2017-12-03 at 16.10.20.png