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

从weex到快应用开发，感觉中间的差异还是蛮大的，关于导航条，在weex中有专用的weex-ui来提供已经封装过的组件供开发者使用，在快应用中，连scroller都没有了，div自带可滑动的属性，但是还没验证是否可以设置偏移量，想想也觉得这样不靠谱。
博主这里采用tab来写导航条，看代码：

<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/[email protected]"></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>

但是这里存在一个限制，比如你想在点击导航条到你选中的那一项时下面有一条横线，tab是不支持的，如果想实现可以尝试在tab-bar中的每一个选项中做文章（最下面加横线，点击tab的方法中来控制），可以实现类似的效果，如果你需要的话。