一下仅仅将代码贴上来了,稍看下就会明白
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)来修改全局数据,最后每个元素根据这个全局数据来修改样式。