上边图片跟随点击的图片发生变化，点击图片样式发生变化_循环图片,当点击某一个图片后动态点击的图片动态添加样式-优快云博客

本文链接：https://blog.youkuaiyun.com/sunlizhen/article/details/78741343

本文介绍如何在微信小程序中实现图片循环加载并为每个图片添加点击样式。通过JSON数据渲染图片，并利用点击事件函数修改全局数据currentid来改变选中图片的边框样式。

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

一下仅仅将代码贴上来了，稍看下就会明白

html代码：

<view>
<imagesrc='{{pic}}'></image>
</view>
<view 
wx:for='{{images}}' 
wx:key = 'index' 
class='img' 
bindtap='click'>
<imagesrc='{{item.pic}}'data-pic='{{item.pic}}'data-id='{{item.id}}'style="border:{{item.id==currentid?'2px
 solid green':'2px solid #fff'}}"bindtap='borderTap'></image>
<view>{{item.name}}</view>
</view>

接下来给每个循环的子元素增加点击样式才是本文重点，看完下面的操作以后，相信你能够豁然开朗。

我们可以给每个子元素添加点击事件：上面代码中的bindtap="borderTap"就是给每个元素添加点击事件，这个点击事件处理函数在js文件中定义。下面我直接贴出这个页面的完整js文件：

// pages/pay/pay.js
var app = getApp();
Page({
data:{
images:[],
pic: '',
currentid:'1'
},
click:function(e){
var pic = e.target.dataset.pic
this.setData({
pic:pic
})
},
borderTap:function(e){
this.setData({
currentid:e.target.dataset.id
})
console.log(e)
},
onLoad:function(e){
var that = this;
wx.request({
url: '你的接口',
data:{
num : 6
},
success:function(res){
that.setData({ 
images: res.data.result.result.list,
pic: res.data.result.result.list[0].pic,
}); 
console.log(res.data.result.result.list) 
}
})
}
})

总结：

实现的逻辑有点绕：首先通过JSON数据循环渲染图片，然后给每个图片一个统一的点击事件函数borderTap，通过这个函数修改当前页面的全局数据currentid为被点击元素的id，最后在视图文件中判断当前元素的id是否等于这个值来修改被点击元素的样式。

不得不这样做的根本原因：小程序不能像javascript或者jquery一样获取DOM元素或JQ对象来修改样式，而是通过setData({})方法刷新全局数据，然后回调渲染方法来重绘DOM（懂ReactJS的童鞋应该很熟悉）。全局数据是修改样式的唯一依据，它由点击事件函数修改，但是不像静态wxml每个导航元素都可以定义一个点击事件函数，通过循环遍历的元素只能是调用同一个事件函数（我们定义的borderTap）修改全局数据，所以我们需要获取每个元素的唯一标识（我们定义在JSON中的id）来修改全局数据，最后每个元素根据这个全局数据来修改样式。