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

原创

CodingFight 2018-04-20 16:03:04 博主文章分类：华为快应用 ©著作权

©著作权归作者所有：来自51CTO博客作者CodingFight的原创作品，请联系作者获取转载授权，否则将追究法律责任

从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/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>