weex 折疊清單元件

weex實作折疊清單（人員組織的樣式），有light元件庫供參考（https://document.lightyy.com/light_ui_ref/index.html），但是（因為個人公司UI源碼，是以自己手碼了一個供參考）

參考：https://www.cnblogs.com/crazycode2/p/7919256.html

要實作的效果圖：

源碼：（提供了源碼，功能不夠用，可以自己擴充）

accordion.vue:
           

<!-- 折疊清單 元件 -->
<template>
    <div class="accordion_main_css">

        <div class="firstCellCss" @click="toggleList">
            //一級清單内容坑位
            <slot name="firstContent" :row="firstItem" ></slot>
            <image class="arrowRightImageCss" v-if="!isFirstDisplay" src="mipmap://cell_right_arrow.png"/>
            <image class="arrowDownImageCss" v-else src="mipmap://cell_down_arrow.png"/>
        </div>

        <div class="secondCellCss" v-if="isFirstDisplay">
            <div style="flex-direction: column;" v-for="(item,index) in  firstItem.children" @click="toggleSecondList(item)">
                <div  style="height: 1px;background-color: #eee"></div>
                <div style="justify-content: space-between;align-items: center;flex-direction: row;height: 88px">
                    //二級清單内容坑位
                    <slot name="secondContent" :row="item" ></slot>
                    <image class="arrowRightImageCss" v-if="!isSecondDisplay" src="mipmap://cell_right_arrow.png"/>
                    <image class="arrowDownImageCss" v-else src="mipmap://cell_down_arrow.png"/>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                isFirstDisplay: false,//一級清單icon是否展示，是否有字清單
                isSecondDisplay: false//二級清單icon是否展示，是否有字清單
            }
        },
        props: {
            //content ，使用的話用slot重寫content view
            firstItem: {
                type: Object,
                default() {
                    return {}
                }
            },
        },
        methods: {
            toggleList() {
                if(this.firstItem.children.length>0){
                    this.isFirstDisplay = !this.isFirstDisplay;
                }else{
                    console.log('沒有子集')
                }
            },
            toggleSecondList(item) {
                //this.isSecondDisplay = !this.isSecondDisplay
                this.$emit('childItem', item);
            }
        }
    }
</script>

<style scoped>
    .accordion_main_css {
        width: 750px;
        display: flex;
        flex-direction: column;
        background-color: white;
    }

    .firstCellCss {
        flex-direction: row;
        justify-content: space-between;
        background-color: white;
        align-items: center;
        height: 88px;
        line-height: 88px;
    }

    .secondCellCss {
        flex-direction: column;
        background-color: white;
    }

    .arrowRightImageCss{
        width:14px;
        height: 24px;
        margin-right: 24px;
        align-items: right;
    }
    .arrowDownImageCss{
        width:24px;
        height: 14px;
        align-items: right;
        margin-right: 24px;
    }
</style>
           

控件使用：在自己的vue裡使用

<!-- 清單 -->
<scroller  style="align-items:center">
    <div v-for="(item,index) in organizationList">
        //展示分割線
        <div style="height: 1px;background-color: #eee"></div>
        //清單的cell  （firstItem一級清單的item  ；  childItem二級清單item的點選傳回）
        <accordion  :firstItem="item" :childItem="childItemClick">

               //一級内容坑位展示
               <div slot="firstContent" slot-scope="props" style="flex-direction: row;align-items: center;margin-left:24px">
                    <image  style="width: 34px;height:34px" src="mipmap://department_icon.png"></image>
                    <text style="font-size: 30px;color: #333;margin-left:10px;"> {{ props.row.name }}（{{ item.children.length }}人）</text>
               </div>

               //二級内容坑位展示
               <div slot="secondContent" slot-scope="props" style="flex-direction: row;align-items: center;margin-left: 44px">
                  <image  style="width: 23px;height:23px" src="mipmap://depart_org_icon.png"></image>
                  <text style="margin-left:10px; font-size: 28px;color: #333;"> {{ props.row.name }} </text>
               </div>

        </accordion>

    </div>
</scroller >