image组件高度问题,显示好恶心?
发布于 7 年前 作者 pengyong 5744 次浏览 来自 问答

js文件

Page({
  data: {
    has:[
      {title:'产品1',num:5,sendNum:0},
      { title: '产品2', num: 5, sendNum: 0 },
      { title: '产品3', num: 5, sendNum: 0 },
      { title: '产品4', num: 5, sendNum: 0 },
    ]
  },
  onLoad: function (options) {

  }
})

wxml文件

<view class="page">
  <view class="session">
    <view class="ss-title">选择配送产品</view>
    <view class="flex-item3">
      <view class="item3-list" wx:for="{{has}}" wx:key="index">
        <view class="list-left">{{item.title}}</view>
        <view class="list-mid">{{item.num}}</view>
        <view class="list-right">
          <view class="num-item">
            <image class="item-icons" src="../../assets/icon/dec.png" mode="widthFix"></image>
            <view class="num-item-num">{{item.sendNum}}</view>
            <image class="item-icons" src="../../assets/icon/inc.png" mode="widthFix"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

wxss文件

.session{
  background: #fff;
  padding: 10px;
}
.ss-title{
  text-align: center;
  border-bottom: 1px solid #f3f3f3;
  margin: 10px;
}
.item3-list{
  display: flex;
  color: #555555;
  border-bottom: 1px solid #f1f1f1;
}
.list-left{
  flex: 2;
  padding:5px;
  line-height: 25px;
}
.list-mid{
  flex: 1;
  padding: 5px;
  line-height: 25px;
  text-align: center;
}
.list-right{
  flex: 1;
  padding: 5px;
  height: 25px;
  line-height: 25px;
  text-align: center;
}
.num-item{
  display: flex;
}
.item-icons{
  width: 100%;
  flex: 1
}
.num-item-num{
  line-height: 25px;
  flex: 2;
  text-align: center;
}

显示出来是这样的,这样看好像没什么问题

问题来了。。。。。

两个样式是一样的,给它设定高度25px了,编译出来的一个22px,一个21px

一脸懵逼。。。。。。太TMD恶心了!

求解!

1 回复

不要加mode,加了mode后是不确定的

回到顶部