小程序加号tabbar
安小轩 人气:1前言
相信大家也看过很多app或者小程序的tabbar中间是一个突出加号,这个用自带的组件无法实现,需要我们手动写一个tabbar的样式来实现效果。我们一起看看吧!
首先新建一个tabbar的组件。
html代码
注意点:需要判断是否是iphonex系列的手机,这类手机需要设置高度。对于中间的加号突出的菜单,格外设置样式。直接使用了navigator,省去了需要写方法跳转这一步骤。但是需要设置hover-class="none"
属性。避免点击时候有阴影出现。
<view class="tabbar_box {{isIphoneX ? 'iphoneX-height':''}}"> <block wx:for="{{tabbar}}" wx:key="index"> <navigator wx:if="{{item.isSpecial}}" hover-class="none" url="{{item.pagePath}}" class="tabbar_nav {{item.selected?'selected' : ''}}" open-type="navigate"> <view class='special-wrapper'>+</view> </navigator> <navigator wx:else hover-class="none" url="{{item.pagePath}}" class="tabbar_nav {{item.selected?'selected' : ''}}" open-type="switchTab"> <image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image> <text>{{item.text}}</text> </navigator> </block> </view>
js代码
定义tabbar的数据,包括选中图标和未选中图标,路径url和菜单文本值。
data: { isIphoneX: app.globalData.systemInfo.model.search('iPhone X') != -1 ? true : false, tabbar: [{ "pagePath": "/teacher/pages/teach/classroom/classroom", "iconPath": "/image/index.png", "selectedIconPath": "/image/index-active.png", "text": "首页" }, { "pagePath": "/teacher/pages/teach/publish/publish", "isSpecial": true, }, { "pagePath": "/teacher/pages/teach/mine/mine", "iconPath": "/image/index.png", "selectedIconPath": "/image/index-active.png", "text": "我的" }], }
在需要的页面引入组件
在需要你用到tabbar的页面引入组件
{ "usingComponents": { "custom-tabbar": "../../components/common/custom-tabbar/custom-tabbar", } }
适用不同页面
可能会有不同的页面需要展示不同tabbar的时候,可以通过传参from,来判断是哪个页面引用的。从而展示不通的tabbar数据。就可以适用于其他需要tabbar的页面。
<custom-tabbar from="classroom"></custom-tabbar>
设置tabbar选中状态
通过判断当前路由和当前tabbar数据的path,对比成功后设置selected属性,实现选中效果。
setTabbar(){ let currentPages = getCurrentPages(); let pagePath = currentPages[currentPages.length - 1].route; this.data.tabbar.forEach(item => { item.selected = false; if(item.pagePath.indexOf(pagePath) > -1){ item.selected = true; } }) this.setData({ tabbar: this.data.tabbar }); }
css代码
样式文件
.tabbar_box{ background-color: #fff; display: flex; justify-content: space-around; position: fixed; bottom: 0; left: 0; z-index: 10; width: 100%; height: 98rpx; box-shadow: 0 0 2px rgba(0, 0, 0, 0.1); } .tabbar_box.iphoneX-height{ padding-bottom: 66rpx; } .middle-wrapper{ position: absolute; right: 310rpx; bottom: 0; background-color: #fff; width: 120rpx; height: 120rpx; border-radius: 50%; border-top: 2rpx solid #f2f2f3; } .middle-wrapper.iphoneX-height{ bottom: 66rpx; } .tabbar_nav{ flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 20rpx; height: 100%; position: relative; color: rgba(0, 0, 0, 0.45); font-size: 24rpx; } .tabbar_icon{ width: 42rpx; height: 42rpx; margin-bottom: 10rpx; } .special-wrapper{ position: absolute; top: -30rpx; width: 74rpx; height: 74rpx; border-radius: 50%; background-color: var(--main-font-color); text-align: center; box-sizing: border-box; padding: 6rpx; font-size: 54rpx; line-height: 54rpx; color: #fff; } .selected { color: var(--main-font-color); }
最终效果
以上就是实现带加号的tabbar的全部代码了,记录一下,温故而知新!
总结
加载全部内容