需求:

标题在左边,点击图标在右边

代码:

wxml代码

  <view class='flex-wrp-row item'>
    <view class='item-left flex-wrp-row'>
      <image src='../../image/ic_xxx.png' class='icon-left' mode='aspectFit'></image>
      <text class='text'>左边</text>
    </view>
    <view class='item-right flex-wrp-row'>
      <text class='text'>右边</text>
      <image src='../../image/ic_right.png' class='icon-right' mode='aspectFit'></image>
    </view>
  </view>

wxss代码:

/* 水平显示 */

.flex-wrp-row {
  display: flex;
  flex-direction: row;
}

.item {
  padding: 20rpx;
  position: relative;
}

.item-left {
   flex: 1; /* 重要 */
   align-items:center;
}

.item-right {
  position: relative;
  align-items:center;
}


 

ฅ՞•ﻌ•՞ฅ ~ 厚着脸皮要个赞赏哈 ~ ฅ՞•ﻌ•՞ฅ

 

更多推荐