微信小程序实战之仿android fragment可滑动底部导航栏（4）

底部3-5个选项的底部导航栏，目前在移动端上是主流布局之一，因此腾讯官方特地做了，可以通过设置，就可以做出了一个底部的导航栏。相关教程：

但是通过设置的这个底部的导航栏，功能上比较固定，它必须要设置与它对应的一个页面，而且并不能滑动。

在业务上，有时候会比较限制，并不能完全满足所需。

又例如早前有人拿着UI稿问我，这种广告轮播图的样式，在小程序能不能实现呢？

我当时没有想了下，还不是很确定，因为小程序的轮播图的那几个小点点实在比较普通，样式单一。

因此特意写了一篇自定义轮播图的文章

链接：

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

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

项目最终效果图：

wxml：

Box" duration="300" style="height:{{winHeight - 51}}px" bindchange="bindChange">

@H_502_15@
<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}}

@H_502_15@
<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}}

@H_502_15@
<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}}

@H_502_15@
<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}}

frag01 frag02 frag03 frag04

wxss：

Box { display: block; height: 100%; width: 100%; overflow: hidden; } .hot-Box { display: block; height: 100%; font-family: Helvetica; } /* list */ .themes-list { background: #fff; display: block; margin-bottom: 20px; } .themes-list-Box { display: block; position: relative; padding: 16px 20px; border-bottom: 1px solid #f2f2f2; } .themes-list-main { margin-left: 1px; } .themes-list-name { font-size: 14px; color: #444; height: 20px; line-height: 20px; overflow: hidden; } /*tab*/ .swiper-tab { height: 50px; background: #fff; display: flex; position: relative; z-index: 2; flex-direction: row; justify-content: center; align-items: center; border-top: 1px solid #ccc; } .swiper-tab-list { margin: 0 20px; padding: 0 4px; font-size: 28rpx; font-family: Helvetica; } .active { /*border-bottom: 1px solid #FFCC00;*/ color: #FFCC00; } .swiper-tab-img { text-align: center; } .img { width:23px; height: 23px; }

js：

获取系统信息 wx.getSystemInfo( { success: function( res ) { that.setData( { winWidth: res.windowWidth,winHeight: res.windowHeight }); } }); },/** * 滑动切换tab */ bindChange: function( e ) { var that = this; that.setData( { currentTab: e.detail.current }); },/** * 点击切换tab */ swichNav: function( e ) { console.log(e) var that = this; if( this.data.currentTab === e.currentTarget.dataset.current ) { //点击的是同一个，则不操作 return false; } else { that.setData( { currentTab: e.currentTarget.dataset.current }) }

}
})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/weapp/39911.html

微信小程序实战之仿android fragment可滑动底部导航栏（4）

猜你在找的微信小程序相关文章