一、效果图:
【感觉这个图很有趣,所以记录一下☺️】
二、代码
【 这个主要是通过定位
实现滴,通过动态改变不同图片对应的left
值 】
wxml:
<view class="circle_imgs">
<image wx:for="{{imgs}}" wx:key="index" src="{{no_arranging}}" style="left: {{46*index}}rpx;z-index: {{index}}"></image>
<!-- 下面的230的由来:23px*5*2 =230rpx -->
<image src="{{seeMore}}" alt="" style="left: 230rpx;z-index: 99"></image>
</view>
wxss:
.circle_imgs {
position: relative;
}
.circle_imgs>image {
position: absolute;
top: 0;
width: 60rpx;
height: 60rpx;
border-radius: 50%;
background-color: pink;
object-fit: cover;
}
js:
Page({
/**
* 页面的初始数据
*/
data: {
imgs: [1,2,3,4,5],
},
})