|
底部3-5个选项的底部导航栏，目前在移动端上是主流布局之一，因此腾讯官方特地做了，可以通过设置，就可以做出了一个底部的导航栏。
相关教程：
但是通过设置的这个底部的导航栏，功能上比较固定，它必须要设置与它对应的一个页面，而且并不能滑动。
在业务上，有时候会比较限制，并不能完全满足所需。
又例如早前有人拿着UI稿问我，这种广告轮播图的样式，在小程序能不能实现呢？
我当时没有想了下，还不是很确定，因为小程序的轮播图的那几个小点点实在比较普通，样式单一。
因此特意写了一篇自定义轮播图的文章
链接：
因此自定义就有这个必要性
下面介绍这个仿Android fragment可滑动的底部导航栏如何实现
项目最终效果图：
wxml：
<view class="themes-list">
<view class="themes-list-box" wx:for="{{datalists}}">
<view class="themes-list-main">
<view class="themes-list-name">{{item}}
<view class="themes-list">
<view class="themes-list-box" wx:for="{{reslists}}">
<view class="themes-list-main">
<view class="themes-list-name">{{item}}
<view class="themes-list">
<view class="themes-list-box" wx:for="{{datalists}}">
<view class="themes-list-main">
<view class="themes-list-name">{{item}}
<view class="themes-list">
<view class="themes-list-box" wx:for="{{reslists}}">
<view class="themes-list-main">
<view class="themes-list-name">{{item}}
<view class="swiper-tab">
<view class="swiper-tab-list {{currentTab==0 ? 'active' : ''}}" data-current="0" bindtap="swichNav">
<view class="swiper-tab-img"><image class="img" src="{{currentTab==0 ? iconlists[0].focus: iconlists[0].normal}}">
frag01
frag02
frag03
frag04
wxss：
js：
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
