|
底部3-5个选项的底部导航栏，目前在移动端上是主流布局之一
因此腾讯官方特地做了，可以通过设置，就可以做出了一个底部的导航栏
但是通过设置的这个底部的导航栏，功能上比较固定，它必须要设置与它对应的一个页面，而且并不能滑动。
在业务上，有时候会比较限制，并不能完全满足所需。
因此自定义就有这个必要性
下面介绍这个仿Android fragment可滑动的底部导航栏如何实现
下面介绍这个仿android fragment可滑动的底部导航栏如何实现
项目最终效果图：
wxml：
-
<swiper current="{{currentTab}}" class="swiper-box" duration="300" style="height:{{winHeight - 51}}px" bindchange="bindChange">
-
-
-
<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>
-
-
-
<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="{{reslists}}">
-
<view class="themes-list-main">
-
<view class="themes-list-name">{{item}}</view>
-
</view>
-
</view>
-
</view>
-
</scroll-view>
-
</swiper-item>
-
-
-
<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
邀请
原作者: 模板之家
来自: 网络收集
| 
