欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 微信小程序仿android fragment可滑动的底部导航栏

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:789

HTML5自适应律师工作室类网

2020-04-04   浏览:654

高端HTML5响应式企业通用网

2020-05-06   浏览:560

html5响应式外贸网站英文版

2020-05-08   浏览:545

HTML5影视传媒文化公司类网

2020-05-12   浏览:543

微信小程序仿android fragment可滑动的底部导航栏

发布时间:2021-01-06  

底部3-5个选项的底部导航栏,目前在移动端上是主流布局之一因此腾讯官方特地做了,可以通过设置,就可以做出了一个底部的导航栏但是通过设置的这个底部的导航栏,功能上比较固定 ...

 

 

 

底部3-5个选项的底部导航栏,目前在移动端上是主流布局之一 
因此腾讯官方特地做了,可以通过设置,就可以做出了一个底部的导航栏 
但是通过设置的这个底部的导航栏,功能上比较固定,它必须要设置与它对应的一个页面,而且并不能滑动。
在业务上,有时候会比较限制,并不能完全满足所需。

因此自定义就有这个必要性

下面介绍这个仿Android fragment可滑动的底部导航栏如何实现

下面介绍这个仿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>