weex 如何在一個縱向列表里嵌套一個橫向列表？

將第一列和第一行用div單獨抽出來用個固定定位,應(yīng)該可以實現(xiàn)

我們的需求差不多啊，解決了么

把這個頁面寫成html網(wǎng)頁，然后用web標(biāo)簽接進(jìn)去？

最終按照一下處理了，不完美，但能用。

<template>
    <div class="container" >
        <div class="title-container">
            <div class="item-title-wrapper" :style="{'background-color': '#ffffff'}"></div>

            <div class="content-container">
                <div class="content-container" :ref="'contentDiv'">
                    <div v-for="(title,index) in rowTitles" class="item-content-wrapper"
                         :style="{'background-color': '#ffffff'}">
                        <text class="item-content">{{title.name}}</text>
                    </div>
                </div>
            </div>

            <div class="item-title-wrapper-cover" :style="{'background-color': '#ffffff'}">
                <text class="item-title" style="z-index:100;">{{tableName}}</text>
            </div>
        </div>

        <scroller  show-scrollbar="false" style="height:1120px;width:750px;">
            <div class="content-container">
                <div class="content-type">
                    <div class="item-title-wrapper" v-for="(data,index) in columnTitles"
                         :style="{'background-color': index%2==0?'#f8f8f8':'#ffffff'}">
                        <text class="item-title">{{data.name}}</text>
                    </div>
                </div>
                <scroller class="content-container" scroll-direction="horizontal" @scroll="onContentScroll">
                    <div v-for="(salesman,index) in tableItems" >
                        <div v-for="(item,inx) in salesman.list" class="item-content-wrapper"
                             :style="{'background-color': inx%2==0?'#f8f8f8':'#ffffff','margin-bottom':(inx==salesman.list.length-1)?'250px':'0px'}">
                            <text class="item-content">{{item.count}}</text>
                        </div>
                    </div>
                </scroller>
            </div>
        </scroller>
    </div>
</template>

<script type="text/ecmascript-6">
    import 'Config'
    const animation = weex.requireModule('animation');

    export default{
        props: {
            //左上角第一個Item內(nèi)容
            tableName: {
                type: String,
                default: "銷售",
            },
            //縱向標(biāo)題
            columnTitles: {
                type: Array,
                default: [],
            },
            //橫向標(biāo)題
            rowTitles: {
                type: Array,
                default: [],
            },
            //表格內(nèi)容
            tableItems: {
                type: Array,
                default: [],
            }
        },
        data(){
            return {
                contentOffsetX: 0,
            }
        },
        methods: {
            onContentScroll(e){
                this.contentOffsetX = e.contentOffset.x;
            }
        },
        watch: {
            contentOffsetX (newVal, oldVal) {
                let el = this.$refs.contentDiv;
                animation.transition(el, {
                    styles: {
                        transform: `translateX(${this.contentOffsetX}px)`
                    },
                    duration: 0,
                });

            },
        }
    }
</script>

<style scoped type="text/scss" lang="sass">
    .container {
        display: flex;
    }

    .title-container {
        display: flex;
        flex-direction: row;
        position: relative;
    }

    .item-title-wrapper-cover{
        position: absolute;
        left: 0;
        top:0;
        width: 188px;
        height: 100px;
        border-right-color: #e6e6e6;
        border-right-style: solid;
        border-right-width: 1px;
        border-bottom-color: #e6e6e6;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        padding-left: 29px;
        justify-content: center;
    }

    .content-container {
        display: flex;
        flex-direction: row;
    }

    .content-type {
        display: flex;
        flex-direction: column;
    }

    .rank-title-item {
        border-color: #e6e6e6;
        border-style: solid;
        border-width: 2px;
        height: 100px;
        width: 200px;
        align-items: center;
        justify-content: center;
    }

    .rank-title-name {
        font-size: 28px;
    }

    .salesman-item-wrapper {
        border-color: #e6e6e6;
        border-style: solid;
        border-width: 2px;
        height: 100px;
        width: 200px;
        align-items: center;
        justify-content: center;
    }

    .item-title-wrapper {
        width: 188px;
        height: 100px;
        border-right-color: #e6e6e6;
        border-right-style: solid;
        border-right-width: 1px;
        border-bottom-color: #e6e6e6;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        padding-left: 29px;
        justify-content: center;
    }

    .item-title {
        font-size: 28px;
        color: #999999;
    }

    .item-content-wrapper {
        width: 150px;
        height: 100px;
        justify-content: center;
        border-bottom-color: #e6e6e6;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        padding-left: 19px;
    }

    .item-content {
        font-size: 28px;
        color: #333333;
    }
</style>