weex 折叠列表组件

最新推荐文章于 2024-06-20 09:41:14 发布

漠天515

最新推荐文章于 2024-06-20 09:41:14 发布

阅读量1.1k

点赞数

分类专栏： weex 文章标签： weex acordion weex 折叠列表组件

本文链接：https://blog.csdn.net/u010326875/article/details/84584321

版权

weex 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

weex实现折叠列表（人员组织的样式），有light组件库供参考（https://document.lightyy.com/light_ui_ref/index.html），但是（因为个人公司UI源码，所以自己手码了一个供参考）

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

要实现的效果图：

codinate

源码：（提供了源码，功能不够用，可以自己扩展）

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 >