当前位置:   article > 正文

uniapp 放大中间图标

uniapp 放大中间图标

 方法1:使用css

  1. /*样式直接复制到项目的App.vue即可*/
  2. .uni-tabbar {
  3. /*.uni-tabbar__item:nth-last-child(3) 修改倒数第三个 也就是中间的图标 我这边底部栏是五个*/
  4. .uni-tabbar__item:nth-last-child(3) {
  5. .uni-tabbar__bd {
  6. /*.uni-tabbar__icon 去掉原图标大小,强制为自适应宽高*/
  7. .uni-tabbar__icon {
  8. width: auto !important;
  9. height: auto !important;
  10. }
  11. /*图标大小 !important 强制覆盖*/
  12. img {
  13. height: 70rpx !important;
  14. width: 70rpx !important;
  15. }
  16. }
  17. }
  18. }

方法2:配置midButton(和tabbar中list同级)

  1. "midButton": {
  2. "width": "48px",
  3. "height": "48px",
  4. "text": "",
  5. "iconPath": "static/tabbar/home-s.png",
  6. "iconWidth": "48px",
  7. }
  1. API放在一个app.vue的页面内就好了。url里填写你要跳转的路径。
  2. uni.onTabBarMidButtonTap(()=>{
  3. uni.navigateTo({
  4. url: '/pages/card/card'
  5. });
  6. })

 官网资料:uni-app官网

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/125306
推荐阅读