华为快应用-如何来写一个列表选择器

<template>
    <div class="cuslistclass">
        <div class="nav-header">
            <image class="kefu-left"></image>
            <text style="color: white; font-size: 34px;width: 100%;text-align:center">标题</text>
            <image class="kefu-right" src="../Common/ico_nav_home_focus@2x.png"></image>
        </div>
        <!--tab组件-->
        <tabs class="tabs" onchange="changeTabAction" index="0">
            <!--如果想做成可滑动的设置mode为scrollable，当宽度超过屏幕时会滑动，默认为不可滑动fixed-->
            <tab-bar class="tab-bar" mode="scrollable">
                <text class="tab-text" for="{{titleArray}}">{{$item.name}}</text>
            </tab-bar>
            <!--tab-content只能有一个，里面有几个div就对应有几个导航切换-->
            <tab-content class="tab-content">
                <!--基础组件-->
                <div class="item-container" for="(index, value) in titleArray">
                </div>
            </tab-content>
        </tabs>
    </div>
</template>
<style>
    .cuslistclass {
        width: 100%;
        height: 100%;
        flex-direction: column;
        background-color: white;
    }
    .kefu-left {
        width: 48px;
        height: 48px;
        position: absolute;
        margin-left: 40px;
    }
    .kefu-right {
        width: 48px;
        height: 48px;
        position: absolute;
        margin-right: 40px;
        background-color: white;
    }
    .nav-header {
        background-color: #5259FF;
        width: 100%;
        height: 110px;
        align-items: center;
        align-content: center;
        justify-content: center;
    }
    .tabs {
        flex: 1;
        width: 100%;
        height: 100%;
        background-color: #ffffff;
        border-width: 1px;
        border-color: #a6a6a6;
    }
    .tab-content {
        flex: 1;
    }
    .tab-bar {
        height: 100px;
        background-color: white;
    }
    .tab-text {
        /* width: 120px; */
        margin-left: 20px;
        margin-right: 20px;
        font-size: 28px;
        text-align: center;
        color: #a6a6a6;
    }
    .tab-text:active {
        color: black;
    }
    .cus-list {
        flex-direction: column;
        flex: 1;
        columns: 1;
    }
</style>
<script>
    module.exports = {
        data: {
            listAdd:['家电','生鲜','家纺','厨房用具','粮油'],
        }
    }
</script>