微信小程式之仿android fragment之可滑動的底部導航欄例項 —— 微信小程式實戰系列（4）
阿新 • • 發佈：2019-01-07
底部3-5個選項的底部導航欄，目前在移動端上是主流佈局之一
因此騰訊官方特地做了，可以通過設定，就可以做出了一個底部的導航欄
但是通過設定的這個底部的導航欄，功能上比較固定，它必須要設定與它對應的一個頁面，而且並不能滑動。
在業務上，有時候會比較限制，並不能完全滿足所需。
又例如早前有人拿著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
})
}
}
})微信小程式教程系列
基礎篇
------------------------------------------------------------
實戰篇
------------------------------------------------------------
電商篇
------------------------------------------------------------
未完待續。。。
謝謝觀看，不足之處，敬請指導