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