uni-app tabBar中间按钮 之 midButton
<p>midButton 中间按钮 仅在 <strong>list 项为偶数</strong>时有效 ， 需要<strong>App 2.3.4+、H5 3.0.0+</strong>以上版本</p><p> </p>
<p><img src="https://img2020.cnblogs.com/blog/1788970/202101/1788970-20210131161312136-1261938383.png"></p>
<p> </p>
<p><strong>midButton 属性说明</strong></p>
<table>
<thead>
<tr><th>属性</th><th>类型</th><th>必填</th><th>默认值</th><th>描述</th></tr>
</thead>
<tbody>
<tr>
<td>width</td>
<td>String</td>
<td>否</td>
<td>80px</td>
<td>中间按钮的宽度，tabBar 其它项为减去此宽度后平分，默认值为与其它项平分宽度</td>
</tr>
<tr>
<td>height</td>
<td>String</td>
<td>否</td>
<td>50px</td>
<td>中间按钮的高度，可以大于 tabBar 高度，达到中间凸起的效果</td>
</tr>
<tr>
<td>text</td>
<td>String</td>
<td>否</td>
<td> </td>
<td>中间按钮的文字</td>
</tr>
<tr>
<td>iconPath</td>
<td>String</td>
<td>否</td>
<td> </td>
<td>中间按钮的图片路径</td>
</tr>
<tr>
<td>iconWidth</td>
<td>String</td>
<td>否</td>
<td>24px</td>
<td>图片宽度（高度等比例缩放）</td>
</tr>
<tr>
<td>backgroundImage</td>
<td>String</td>
<td>否</td>
<td> </td>
<td>中间按钮的背景图片路径</td>
</tr>
</tbody>
</table>
<p>midButton没有pagePath，需监听点击事件，自行处理点击后的行为逻辑。监听点击事件为调用API：uni.onTabBarMidButtonTap，详见https://uniapp.dcloud.io/api/ui/tabbar?id=ontabbarmidbuttontap</p>
<p><strong> 导航代码演示：</strong></p>
<div class="cnblogs_code">
<pre>"tabBar"<span style="color: rgba(0, 0, 0, 1)">: {
</span>"color": "#808080"<span style="color: rgba(0, 0, 0, 1)">,
</span>"selectedColor": "#dd0000"<span style="color: rgba(0, 0, 0, 1)">,
</span>"backgroundColor": "#ffffff"<span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">中间件2~4生效</span>
"midButton"<span style="color: rgba(0, 0, 0, 1)">:{
</span>"iconPath":"static/tab-find-current.png"<span style="color: rgba(0, 0, 0, 1)">,
</span>"height":"80px"<span style="color: rgba(0, 0, 0, 1)">,
</span>"iconWidth":"60px"<span style="color: rgba(0, 0, 0, 1)">,
</span>"text":"发布"<span style="color: rgba(0, 0, 0, 1)">
},
</span>"list"<span style="color: rgba(0, 0, 0, 1)">: [{
</span>"text": "首页"<span style="color: rgba(0, 0, 0, 1)">,
</span>"iconPath": "static/tab-home.png"<span style="color: rgba(0, 0, 0, 1)">,
</span>"selectedIconPath": "static/tab-home-current.png"<span style="color: rgba(0, 0, 0, 1)">,
</span>"pagePath": "pages/index/index"<span style="color: rgba(0, 0, 0, 1)">
},
{
</span>"text": "分类"<span style="color: rgba(0, 0, 0, 1)">,
</span>"iconPath": "static/tab-find.png"<span style="color: rgba(0, 0, 0, 1)">,
</span>"selectedIconPath": "static/tab-find-current.png"<span style="color: rgba(0, 0, 0, 1)">,
</span>"pagePath": "pages/category/category"<span style="color: rgba(0, 0, 0, 1)">
},
{
</span>"text": "消息"<span style="color: rgba(0, 0, 0, 1)">,
</span>"iconPath": "static/tab-msg.png"<span style="color: rgba(0, 0, 0, 1)">,
</span>"selectedIconPath": "static/tab-msg-current.png"<span style="color: rgba(0, 0, 0, 1)">,
</span>"pagePath": "pages/message/message"<span style="color: rgba(0, 0, 0, 1)">
},
{
</span>"text": "我的"<span style="color: rgba(0, 0, 0, 1)">,
</span>"iconPath": "static/tab-me.png"<span style="color: rgba(0, 0, 0, 1)">,
</span>"selectedIconPath": "static/tab-me-current.png"<span style="color: rgba(0, 0, 0, 1)">,
</span>"pagePath": "pages/me/me"<span style="color: rgba(0, 0, 0, 1)">
}
]
}</span></pre>
</div>
<p> </p>
<p><strong>监听中间按钮的点击事件演示</strong></p>
<p> 在 App.vue 全局里面添加下面代码：</p>
<div class="cnblogs_code">
<pre>uni.onTabBarMidButtonTap(()=><span style="color: rgba(0, 0, 0, 1)">{
console.log(</span>"点击了"<span style="color: rgba(0, 0, 0, 1)">);
});</span></pre>
</div>
<p> </p><br><br>
来源：https://www.cnblogs.com/shenguoan/p/14352885.html
頁:
[1]