微信小程序头像叠加循环渲染

首先来看看效果图

通过动态控制图片偏移量来实现效果（transform:translateX）;

此案例相对简单，这里就不详细说了直接看代码

index.wxml

<view class='index'>
<view wx:for="{{images}}" wx:key  style='transform:translateX({{-index*30}}rpx)'>
<image class='text' src='{{item}}' mode='aspectFill'></image>
</view>
  <text ></text>
</view>
<!-- images是图片地址 -->

index.wxss

.index {
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  flex-direction:columnl;
  justify-content: flex-start;
  padding:0 10rpx;
  box-sizing: border-box;
}

.index view .text {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: greenyellow;
  border-radius: 50%;
}
view .text:first-of-type {
  transform: translateX(0px);
}