上边图片跟随点击的图片发生变化，点击图片样式发生变化

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

html代码：

< view >

< image src= '{{pic}}'></ image >

</ view >

< view wx:for= '{{images}}' wx:key = 'index' class= 'img' bindtap= 'click'>

< image src= '{{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）来修改全局数据，最后每个元素根据这个全局数据来修改样式。