开发者工具和预览显示问题

Question

想问下老师，下面是自定义的一个tabbar，想实现的效果就是点击中间的按钮图标变大凸起，在开发者工具上面是可以正常显示的，不知道为什么预览或者真机上面就变形了具体的，需要点击操作走一次逻辑才会恢复正常，代码如下，还请老师帮忙看下

<view class="tab-bar"  wx:if="{{showOrNot}}">
  <view class="tab-bar-border"></view>
  <view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{selected == 1 ? 'bulge' : ''}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></image>
    <view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
  </view>
</view>

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 96rpx;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 2rpx;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item image {
  width: 54rpx;
  height: 54rpx;
}
.bulge:nth-child(3) image{
  position: absolute;
  width: 140rpx;
  height: 140rpx;
  top: -40rpx;
  /* padding-top: 10px; */
}
.bulge:nth-child(3) view{
  opacity: 0;
} 
.tab-bar-item view {
  font-size: 20rpx;
}

const app = getApp()
Component({
  data: {
    selected: 0,
    showOrNot:true,
    "color": "#474747",
    "borderStyle": "black",
    "selectedColor": "#FF9900",
    "list": [
      {
        "pagePath": "/pages/count/count",
        "text": "账户",
        "iconPath": "/images/account.png",
        "selectedIconPath": "/images/actcount.png",
        
      },
      {
        "pagePath": "/pages/accountbook/accountbook",
        "text": "账本",
        "iconPath": "/images/acbook.png",
        "selectedIconPath": "/images/tianjia.png",
        
      },
      {
        "pagePath": "/pages/my/my",
        "text": "我的",
        "iconPath": "/images/my.png",
        "selectedIconPath": "/images/actmy.png",
      }
    ]
  },
  methods: {
    switchTab(e) {
      const data = e.currentTarget.dataset
      // const index = e.currentTarget.dataset.index
      const url = data.path
      //...其他的逻辑
      wx.switchTab({url})
    }
  }
})

Answer 1

谢成 2020-09-27 11:11:58

这个代码不全我这边没办法运行。

从问题描述上看，可能是图片初始样式的问题，请检查下图片设置的初始大小。

• 提问者 慕斯卡5069868 #1

  我改了下样式，图标的大小都是32*32的，tabbar的样式里面设置的是初始大小也是32*32的，中间按钮被选中的图标大小是64*64的，设置的也是64*64的，真机上还是同样的显示问题。。。。还有点不明白的是既然中间图标变形了，为什么我点击操作之后就正常显示了呢老师