请教:
当循环渲染了image 标签. 想点击其中的一张图片触发add方法,改变当前的图片并在图片前面加一段文字.
按照如下代码写的话, 点击会把所有循环出来的图片都改变了. 请问要怎么写. 谢谢
<view style=‘background:#F2F2F2;display:flex;justify-content:space-between;’ wx:for="{{xxx}}"> xxxx
<image src="{{src}}" style=‘height:30px;width:30px’ bindtap=‘add’></image>
</view>
JS:
add:function(){
var that = this;
that.setData({
src:’…’
})
},
<view style=‘background:#F2F2F2;display:flex;justify-content:space-between;’ wx:for="{{detailList}}">{{imgIndex==index?wrod:‘奥奥奥奥’}}
<image src="{{imgIndex==index?’…/…/picture/my/nothing.png’:item.Photo}}" style=‘height:30px;width:30px’ bindtap=‘add’ data-index="{{index}}"></image>
</view>
js:
add:function(e){
let index = e.currentTarget.dataset.index;
console.log(index)
var that=this;
that.setData({
wrod:‘sadfsa’,
imgIndex:index
})
},
<view wx:for="{{img}}" wx:for-index=“idx” wx:for-item=“itemName”>
<image src = “{{img.url}}” style = ‘height:30px;width:30px’ bindtap = ‘add’ data-idx="{{idx}}">
</image>
</view>
add: function (e) {
let idx = e.currentTarget.dataset.idx
this.data.img[idx].url = 新的地址
this.setData({
img: this.data.img
})
}
你对请求来的json数组进行操作，把图片的路径变为item.src，当你点击那个图片的时候，拿到那个元素的下标，再拿到json数组，对选中的“下标项”的src属性进行更改，最后再把它放入data中就行了
< view style = 'background:#F2F2F2;display:flex;justify-content:space-between;' wx:for = "{{xxx}}"> xxxx
//循环的时候，把src后面跟上当前的index值
< image src = "{{src_index}}" data-index="{{index}}" style = 'height:30px;width:30px' bindtap = 'add'></ image >
</ view >
JS:
add: function (e){
var index = e.currentTarget.dataset.index;
//当点击的下标为3时，再设置相应的值
if(index == 3){
var that = this ;
var dataobj={};
dataobj["src"+index]='..........';
that.setData(dataobj)
}
},
改了下一楼的代码，不知道是否可行
<view style='background:#F2F2F2;display:flex;justify-content:space-between;' wx:for="{{xxx}}"> xxxx
<image src="{{src}}" data-index="{{index}}" style='height:30px;width:30px' bindtap='add'></image>
</view>
JS:
add:function(e){
var index = e.currentTarget.dataset.index;
//当点击的下标为3时，再设置相应的值
if(index == 3){
var that = this;
that.setData({
src:'..........'
})
}
},
强力驱动