底部3-5個選項的底部導航欄，目前在移動端上是主流布局之一，因此騰訊官方特地做了，可以通過設置，就可以做出了一個底部的導航欄。
相關教程：微信小程序教程系列之設置標題欄和導航欄（7）
但是通過設置的這個底部的導航欄，功能上比較固定，它必須要設置與它對應的一個頁面，而且并不能滑動。
在業務上，有時候會比較限制，并不能完全滿足所需。
又例如早前有人拿著UI稿問我，這種廣告輪播圖的樣式，在小程序能不能實現呢？
我當時沒有想了下，還不是很確定，因為小程序的輪播圖的那幾個小點點實在比較普通，樣式單一。
因此特意寫了一篇自定義輪播圖的文章
因此自定義就有這個必要性
下面介紹這個仿Android fragment可滑動的底部導航欄如何實現
項目最終效果圖：
wxml：
<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> <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> <!-- grag03 --> <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> <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> <!--tab_top--> <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}}"></image></view> <view>frag01</view> </view> <view class="swiper-tab-list {{currentTab==1 ? 'active' : ''}}" data-current="1" bindtap="swichNav"> <view class="swiper-tab-img"><image class="img" src="{{currentTab==1 ? iconlists[1].focus: iconlists[1].normal}}"></image></view> <view>frag02</view> </view> <view class="swiper-tab-list {{currentTab==2 ? 'active' : ''}}" data-current="2" bindtap="swichNav"> <view class="swiper-tab-img"><image class="img" src="{{currentTab==2 ? iconlists[2].focus: iconlists[2].normal}}"></image></view> <view>frag03</view> </view> <view class="swiper-tab-list {{currentTab==3 ? 'active' : ''}}" data-current="3" bindtap="swichNav"> <view class="swiper-tab-img"><image class="img" src="{{currentTab==3 ? iconlists[3].focus: iconlists[3].normal}}"></image></view> <view>frag04</view> </view> </view> wxss：
/*swiper*/ .swiper-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：
Page( { data: { winWidth: 0, winHeight: 0, currentTab: 0, datalists : [ "習近平主持中央財經領導小組第十五次會議", "李克強打叉的“萬里審批圖”成歷史", "新疆自治區舉行反恐維穩誓師大會", "朝鮮代表團抵達馬來西亞處理金正男遇害案", "習近平主持中央財經領導小組第十五次會議", "李克強打叉的“萬里審批圖”成歷史", "新疆自治區舉行反恐維穩誓師大會", "砸鍋賣鐵！索尼是在走向毀滅 還是在奔向新生？" ], reslists:["hello","thank you for your read","if u feel good","can u give me good？"], iconlists:[ {normal:"../../images/wp.png",focus:"../../images/wpselect.png"}, {normal:"../../images/ss.png",focus:"../../images/ssselect.png"}, {normal:"../../images/hc.png",focus:"../../images/hcselect.png"}, {normal:"../../images/my.png",focus:"../../images/myselect.png"}, ] }, onLoad: function( options ) { var that = this; //獲取系統信息 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 }) } } }) 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
