小程序--点击显示与隐藏-动态更改img-src 路径

这里的示列是图标的切换-选中与未选中样式-因点击此图标是直接跳转其它页面的-所以没有考虑点击显示再次点击隐藏效果（类似js的toggle效果）-因为不需要。

方法一：--动态更改img-src路径--直接更换src路径的话-初始渲染会延迟-闪动-所以后来又写了第二种方法-解决了此问题

wxml:

<view class='rotate-list' style='transform:rotate({{angle}}deg);width:{{rotate_list_w}}rpx; height:{{rotate_list_w}}rpx;' bindtouchstart='onTouchStart' bindtouchmove='onTouchMove' bindtouchend='onTouchEnd'>

<image class="rotate-item " bindtap='btnicon' wx:for="{{rotateList}}" wx:key="index" data-index="{{item.index}}" style='top:{{item.top}}rpx;left:{{item.left}}rpx;transform:rotate({{-angle}}deg);' src='{{item.src}}'></image>

</view>

wxjs:

/* icon点击事件*/

btnicon: function (e) {

var _that=this;

// 被点击时传递的参数

var queryIndex = e.currentTarget.dataset['index'];

var select_icon = _that.select_icon();

// 被点击时传递的参数

var queryIndex = e.currentTarget.dataset['index'];

// rotateList获取到原图片数组--iconList_src-重定义数组图片src路径--iconList_src定义重新赋值图片src的值

var rotateList = _that.data.rotateList,

iconList_src = 'rotateList[' + queryIndex + '].src',

iconList_srcy = rotateList[queryIndex].src,//原始图片路径

icon_src = select_icon[queryIndex].src;

_that.setData({

[iconList_src]: icon_src

});

setTimeout(function () {

_that.setData({

[iconList_src]: iconList_srcy

});

}, 800);

},

/**选中样式的icon */

select_icon: function (select){

var _that = this;

var select_rotateList=[

{ src: 'https://s2./2019/06/18/VLEB80.th.png'},

{ src: 'https://s2./2019/06/18/VLEHqe.th.png'},

{ src: 'https://s2./2019/06/18/VLEOIA.th.png'},

{ src: 'https://s2./2019/06/18/VLEjPI.th.png'},

{ src: 'https://s2./2019/06/18/VLEzxf.th.png'},

{ src: 'https://s2./2019/06/18/VLVVGq.th.png' },

{ src: 'https://s2./2019/06/18/VLViZQ.th.png' },

{ src: 'https://s2./2019/06/18/VLVkIs.th.png' },

{ src: 'https://s2./2019/06/18/VLVZR0.th.png'}

];

return select_rotateList;

},

方法二：点击显示与隐藏

wxml:

<view class='rotate-list' style='transform:rotate({{angle}}deg);width:{{rotate_list_w}}rpx; height:{{rotate_list_w}}rpx;' bindtouchstart='onTouchStart' bindtouchmove='onTouchMove' bindtouchend='onTouchEnd'>

<image class="rotate-item hide{{item.contactName?'':'show'}}" bindtap='btnicon' wx:for="{{rotateList}}" wx:key="index" data-index="{{item.index}}" style='top:{{item.top}}rpx;left:{{item.left}}rpx;transform:rotate({{-angle}}deg);' src='{{item.src}}'></image>

<image class="rotate-item hide{{item.contactName?'':'show'}}" wx:for="{{selectlist}}" wx:key="index" data-index="{{item.index}}" style='top:{{item.top}}rpx;left:{{item.left}}rpx;transform:rotate({{-angle}}deg);' src='{{item.src}}'></image>

</view>

wxcss:

.hide{display: none;}

.show{display: block;

wxjs:

/* icon点击事件*/

btnicon: function (e) {

var _that=this;

// 被点击时传递的参数

var queryIndex = e.currentTarget.dataset['index'];

var rotateList = _that.data.rotateList;

var rotateList_contactName = 'rotateList[' + queryIndex + '].contactName';

var select_icon = _that.select_icon();

var selectlist_contactName = 'selectlist[' + queryIndex + '].contactName';

var rotateList_c = rotateList[queryIndex].contactName;

var select_icon_c = select_icon[queryIndex].contactName;

_that.setData({

[rotateList_contactName]: !rotateList_c,

[selectlist_contactName]: !select_icon_c

});

},

/**选中样式的icon */

select_icon: function (select){

var _that = this;

// rotateList获取到原图片数组

var rotateList = _that.data.rotateList;

var icon_src;

_that.setData({

selectlist: rotateList

});

var select_rotateList=[

{ src: 'https://s2./2019/06/18/VLEB80.th.png', contactName: true},

{ src: 'https://s2./2019/06/18/VLEHqe.th.png', contactName: true},

{ src: 'https://s2./2019/06/18/VLEOIA.th.png', contactName: true},

{ src: 'https://s2./2019/06/18/VLEjPI.th.png', contactName: true},

{ src: 'https://s2./2019/06/18/VLEzxf.th.png', contactName: true},

{ src: 'https://s2./2019/06/18/VLVVGq.th.png', contactName: true },

{ src: 'https://s2./2019/06/18/VLViZQ.th.png', contactName: true },

{ src: 'https://s2./2019/06/18/VLVkIs.th.png', contactName: true },

{ src: 'https://s2./2019/06/18/VLVZR0.th.png', contactName: true}

];

//替换src路径

for (var i = 0; i < rotateList.length; i++) {

icon_src = 'selectlist[' + i + '].src';

var selectlist_contactName = 'selectlist[' + i + '].contactName';

_that.setData({

[icon_src]: select_rotateList[i].src,

[selectlist_contactName]: select_rotateList[i].contactName

});

}

return select_rotateList;

},