本篇文章給大家介紹一下在小程序頁面中自定義tabbar組件，實(shí)現(xiàn)底部tab切換的方法。

近日需求，設(shè)計稿如圖

要實(shí)現(xiàn)一個特殊的底部導(dǎo)航欄，采用官方提供的自定義tabbar組件，添加底部tab頁面，切換圖片閃屏?！鞠嚓P(guān)學(xué)習(xí)推薦：小程序開發(fā)教程】

解決采用swiper輪播圖+自定義組件

1.編寫自定義組件jtab-bar

wxml文件

<view class="jtab-bar">   <view class="jtab-bar-item" wx:for="{{list}}" wx:key="index" data-index="{{index}}" bindtap="switchTab">     <image wx:if="{{item.type === 'image'}}" class="jcover-img-bigicon"        src="{{selected === index ? item.iconSelect : item.icon}}"></image>     <view class="jtab-text" wx:else style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>   </view> </view>

js文件

Component({   data: {     selected: 0,     color: "#999999",     selectedColor: "#032F82",     list: [       {       type: 'text',       text: "首頁"     },      {       type: 'image',       icon: '../../image/icon_map.png',       iconSelect: '../../image/icon_map_select.png',       text: ''     },      {       type: 'text',       text: "我的"     }]   },   attached() {   },   methods: {     switchTab(e) {       const data = e.currentTarget.dataset       this.setData({selected: data.index})       this.triggerEvent("setTab", data.index)     }   } })

wxss文件

.jtab-bar {   position: fixed;   bottom: 0;   left: 0;   right: 0;   height: 100rpx;   background: white;   display: flex;   align-items: center;   padding-bottom: env(safe-area-inset-bottom);   box-shadow: 0px -2rpx 2rpx rgba(153, 153, 153, 0.1); }   .jtab-bar-item {   text-align: center;   flex: 1;   height: 100rpx; }  .jtab-bar-item .jtab-text {   height: 100rpx;   line-height: 100rpx; }   .jcover-img-bigicon {   position: fixed;   bottom: 0rpx;   width: 210rpx;   height: 128rpx;   padding-bottom: env(safe-area-inset-bottom);   margin: 0 auto;   right: 0;   left: 0; }

使用的兩張圖片：

2.頁面中使用

wxml文件

<view>   <swiper class="jswipper-block" current="{{currentTab}}"  duration="{{100}}">         <block wx:for="{{background}}" wx:key="*this">           <swiper-item catchtouchmove="swipperStop">             <view class="swiper-item {{item}}">{{item}}</view>           </swiper-item>         </block>       </swiper>   <jtabbar bindsetTab="setTabbar"/> </view>

這里使用catchtouchmove="swipperStop" swipperStop是個空函數(shù)來處理，禁止手動滑動

wxss文件

.jswipper-block {   height: calc(100vh - 170rpx);   background: #F7F8F9; }

js文件

/**    * 頁面的初始數(shù)據(jù)    */   data: {     background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],     currentTab: 0   },    setTabbar({detail}) {     this.setData({currentTab: detail})   },    // 輪播圖 禁止手動滑動 catchtouchmove="swipperStop"   swipperStop(){   },

暫完。