头像加了白色原边,主要用transform:translateX动态偏移实现
<!-- 重叠头像 -->
<view class='cdtouxiang'>
<view wx:for="{{images}}" wx:key="id" style='transform:translateX({{-index*20}}rpx)'>
<image src='{{item}}' mode='aspectFill'></image>
</view>
</view>
.cdtouxiang {
width: 100%;
height: auto;
position: relative;
display: flex;
flex-direction:columnl;
justify-content: flex-start;
padding:0 10rpx;
box-sizing: border-box;
}
.cdtouxiang image {
display: inline-block;
width: 60rpx;
height: 60rpx;
border-style: solid;
font-weight: bold;
border-width: 1rpx;
border-color: white;
border-radius: 50%;
}