[微信小程序]如何在repeat循环中修改某元素的样式及内容

最新推荐文章于 2021-07-02 15:22:11 发布

Tiger_wa

最新推荐文章于 2021-07-02 15:22:11 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序 repeat 文章标签： wepy repeat

本文链接：https://blog.youkuaiyun.com/qq_38136543/article/details/84567561

微信小程序同时被 2 个专栏收录

7 篇文章

订阅专栏

repeat

1 篇文章

订阅专栏

本文介绍如何使用Wepy框架的repeat标签循环展示图片，并通过index属性精确控制图片样式，实现特定图片的特殊样式处理，如圆形显示、图片层叠及数量限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如何在repeat循环中修改某元素的样式及内容

repeat是wepy框架下用于循环页面的标签，它有四个重要的属性：for、index、key、item。其中，对于修改其中元素的重要属性就是index。

示例：

<repeat for="{{list}}" index="index" key="index" item="item">
	<image src="{{item.imgSrc}}"></image>
</repeat>

这样的代码就能基本满足放置一串图片的需求

但是，如果需要第三张图片为圆形，其他不变，应该怎么做呢

示例：

<repeat for="{{list}}" index="index" key="index" item="item">
	<image src="{{item.imgSrc}}" style="{{index==2 ? 'border-radius:50%' : ' '}}"></image>
</repeat>

index作为每个元素唯一的下标，可以精确的定位到此元素，用一个三元表达式，若index=2，即将图片变成圆形，其他的样式则为空。也可以用class来做判断，在class里自定义样式。

示例：

//template

<repeat for="{{list}}" index="index" key="index" item="item">
	<image class="{{index==2 ? 'img-circle' : ' '}}" src="{{item.imgSrc}}"></image>
</repeat>

//css

.img-circle {
	border-radius:50%;
}

如果最多只能显示三张照片，用wx:if来判断显示

<repeat for="{{list}}" index="index" key="index" item="item">
	<image wx:if="{{index<3}}" src="{{item.imgSrc}}"></image>
</repeat>

当index小于3时，满足if条件，显示，超过则不显示。

如果需要多张图片以层叠的方式，且每张挡住上一张图片的一部分，如下图所示，该怎么做
在这里插入图片描述

示例：

//template

<repeat for="{{avatars}}" key="index" index="index" item="item">
	<view class="img" style="top:0rpx;left:{{55*index}}rpx;z-index:{{7-index1}};">
              <image class="" src="{{item}}"></image>
	</view>
</repeat>

//css


.img {
  position: absolute;
  width: 68rpx;
  height: 68rpx;
  border-radius: 50%;
  border: 2rpx solid #fff;
}

采用绝对定位，top=0，每个向右位移他的下标*55，以为下标依次增加，离最左边的距离也是依次增加55的倍数，所以每个的间距是一样的，因为需要从左到右依次覆盖，所以将z-index倒置，可以达到此效果。