请教:
当循环渲染了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 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中就行了
謝謝你先， 你的方法理論上可行的，就是操作起來有點麻煩，特別是動態獲取Json數組里的數據時。
<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:'..........'
})
}
},
小姐姐, 不行吖, 還是全部 img變成setData 里的src了.
不只是index == 3 的那變了src
改变item.src
能貼一下代碼怎麼寫嗎?
data: {
a:['','',''],
src:''xxx"
}
< view wx:for = "{{a}}">
< image src = "{{src}}" data-index="{{index}}" style = 'height:30px;width:30px' bindtap = 'add'></ image >
</ view >
//add方法要怎麼寫?
<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 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)
}
},
改了下一楼的代码，不知道是否可行
你好，所有图片都使用的一个src吗
是的.
那你改变src当然会作用到所有的image上呀，你可以为循环的xxx每一个都设置一个src属性，这样就可以改变某一个image标签了。
<image src="{{src}}" style='height:30px;width:30px' bindtap='add' data-src="src"></image> 這樣? 然後呢,不好意思, 我不太明白.
因为你只有一个src，相当于所有image标签是公用这个src的，一旦src发生改变，所有的组件渲染也会跟着改变。因为你是循环渲染，所以你可以给你循环的那个数组里的每一个对象添加一个src的属性，然后动态的改变对应的src值。
data: {
a:['','',''],
}
< view wx:for = "{{a}}">
< image src = "../../xxxx" style = 'height:30px;width:30px' bindtap = 'add'></ image >
</ view >
假如這樣,src 不用數組, 只想找到點擊對應的那個src ,然後改變它. js 要怎麼寫?