小程序使用display: inline-block后布局混乱

wxml:

<scroll-view class="scroll-wrapper" scroll-x enable-passive="true" scroll-with-animation="true">
      <view class="swiper-item" id="item{{item.id}}" wx:for="{{dataList}}" wx:key="index" data-item="{{item}}" bindtap="gotoUserInfo">
        <image class="user-rank" src="https://school-forum.fxpjiakao.com/icon/images/community/rank_{{index + 1}}.png" mode="" />
        <view><image class="user-img" src="{{item.avatar || defaultAvatar}}" mode=""/></view>
        <view class="user-name">{{item.clubFullName}}</view>
      </view>
</scroll-view>

wxss:

.scroll-wrapper {
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  background: #FFF;
  width: calc(100% - 40rpx);
  box-sizing: border-box;
  margin: 0 20rpx;
}
.swiper-item {
  width: 26%;
  display: inline-block;
  text-align: center;
  margin-right: 20rpx;
  color: #333333;
  font-size: 26rpx;
  padding: 25rpx 5rpx 25rpx 5rpx;
  border-radius: 0px 6px 6px 6px;
  background: #F3F3F3;
  white-space: normal;
  position: relative;
  /* vertical-align: top; */
  box-sizing: border-box;
}
.swiper-item .user-img{
  width: 90rpx;
  height: 90rpx;
  border-radius: 100%;
  margin: 10rpx 0;
}
.swiper-item .user-rank{
  width: 32rpx;
  height: 36rpx;
  position: absolute;
  left: 0;
  top: 0;
}
.swiper-item .user-name{
  height: 70rpx;
  padding: 0 6rpx;
}

原因分析：
1、display：inline-block，是基于baseline对齐的，大小不一会导致上下不齐，所以设置的时候最好设置vertical-align属性。
在样式.swiper-item中加上 vertical-align: top;

.swiper-item {
  width: 26%;
  display: inline-block;
  text-align: center;
  margin-right: 20rpx;
  color: #333333;
  font-size: 26rpx;
  padding: 25rpx 5rpx 25rpx 5rpx;
  border-radius: 0px 6px 6px 6px;
  background: #F3F3F3;
  white-space: normal;
  position: relative;
  vertical-align: top; 
  box-sizing: border-box;
}