底部3-5个选项的底部导航栏,目前在移动端上是主流布局之一因此腾讯官方特地做了,可以通过设置,就可以做出了一个底部的导航栏但是通过设置的这个底部的导航栏,功能上比较固定 ...
底部3-5个选项的底部导航栏,目前在移动端上是主流布局之一
因此腾讯官方特地做了,可以通过设置,就可以做出了一个底部的导航栏
但是通过设置的这个底部的导航栏,功能上比较固定,它必须要设置与它对应的一个页面,而且并不能滑动。
在业务上,有时候会比较限制,并不能完全满足所需。
因此自定义就有这个必要性
下面介绍这个仿Android fragment可滑动的底部导航栏如何实现
下面介绍这个仿android fragment可滑动的底部导航栏如何实现
项目最终效果图:
wxml:
[html] view plain copy
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 51}}px" bindchange="bindChange">
<!-- frag01 -->
<swiper-item>
<scroll-view class="hot-box" scroll-y="true" upper-threshold="50" lower-threshold="100" bindscrolltolower="scrolltolower">
<!-- 列表 -->
<view class="themes-list">
<view class="themes-list-box" wx:for="{{datalists}}">
<view class="themes-list-main">
<view class="themes-list-name">{{item}}</view>
</view>
</view>
</view>
</scroll-view>
</swiper-item>
<!-- grag02 -->
<swiper-item>