大概就是这个效果,改变颜色不太够,变化效果很离谱的时候得两张图。
先看原生小程序中如何实现:
1.获取点击的是哪个循环中的列表:
<view class="set_list" wx:for="{{paymentDeal}}"
wx:for-item="item" wx:for-index="index" wx:key="index"
//获得循环的下标index
bindtap="change_color" data-index='{{index}}'>
</view>
点击事件:change_color
data:{
myclick:0,
// 选中图标
selt:'../../images/myIcon/phoneset.png',
//未选中图标
noselt:'../../images/myIcon/nophoneset.png'
}
...
change_color(e){
console.log("click me");
// let click = e.currentTarget.dataset.index
console.log(this.data.myclick);
this.setData({
myclick:e.currentTarget.dataset.index
})
},
通过点击的index值与下标对比如果相等,就能进行下一步更换图片。log一下myclick,已经能拿到点击的是哪一个了。
点击切换部分:
<view class="set_list" wx:for="{{paymentDeal}}"
wx:for-item="item" wx:for-index="index" wx:key="index"
bindtap="change_color" data-index='{{index}}'>
//三元运算符 如果点击的index等于myclick 使用selt 不等于使用noselt
<image src="{{myclick==index?selt:noselt}}"></image>
{{index}} -- {{myclick}}
</view>
</view>
选中的小圆点变成红色,两张图片一张灰色一张红色。
{{index}} -- {{myclick}}
点击后:
还有一个class样式的三元运算符写法:
<!-- <view class="{{showimg==1?'youclass':''}}" > -->
下边两张图为uniapp写法:
<view class="pageItem" v-for="(item, index) in [1, 2, 3, 4, 5, 7, 8]"
//三元运算符写法 第一种本身带样式,第二种样式二选一
//:class="['touch_item', item.isTouchMove ? 'touch_move_active' : '']"
:class="currentIndex == index ? 'pageItemActive' : ''" :key="index"
//点击时把item的值传进去(item)
@click="changepage(item)">
{{ item }}
</view>
changepage(item){
console.log(item);
console.log('点击的是'+item);
}
效果一样,下面存两张图。