⼩程序--点击显⽰与隐藏-动态更改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-
icon图标库index="{{item.index}}" style='top:{{p}}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 = _ateList,
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: 's2.ax1x/2019/06/18/VLEB80.th.png'},
{ src: 's2.ax1x/2019/06/18/VLEHqe.th.png'},
{ src: 's2.ax1x/2019/06/18/VLEOIA.th.png'},
{ src: 's2.ax1x/2019/06/18/VLEjPI.th.png'},
{ src: 's2.ax1x/2019/06/18/VLEzxf.th.png'},
{ src: 's2.ax1x/2019/06/18/VLVVGq.th.png' },
{ src: 's2.ax1x/2019/06/18/VLViZQ.th.png' },
{ src: 's2.ax1x/2019/06/18/VLVkIs.th.png' },
{ src: 's2.ax1x/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: {{rotat
e_list_w}}rpx;' bindtouchstart='onTouchStart' bindtouchmove='onTouchMove' bindtouchend='onTouchEnd'>
<image class="rotate-item hide{{actName?'':'show'}}" bindtap='btnicon' wx:for=" {{rotateList}}" wx:key="index" data-index="{{item.index}}" style='top:{{p}}rpx;left: {{item.left}}rpx;transform:rotate({{-angle}}deg);' src='{{item.src}}'></image>
<image class="rotate-item hide{{actName?'':'show'}}" wx:for="{{selectlist}}"
wx:key="index" data-index="{{item.index}}" style='top:{{p}}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 = _ateList;
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 = _ateList;
var icon_src;
_that.setData({
selectlist: rotateList
});
var select_rotateList=[
{ src: 's2.ax1x/2019/06/18/VLEB80.th.png', contactName: true}, { src: 's2.ax1x/2019/06/18/VLEHqe.th.png', contactName: true}, { src: 's2.ax1x/2019/06/18/VLEOIA.th.png', contactName: true}, { src: 's2.ax1x/2019/06/18/VLEjPI.th.png', contactName: true}, { src: 's2.ax1x/2019/06/18/VLEzxf.th.png', contactName: true}, { src: 's2.ax1x/2019/06/18/VLVVGq.th.png', contactName: true }, { src: 's2.ax1x/2019/06/18/VLViZQ.th.png', contactName: true }, { src: 's2.ax1x/2019/06/18/VLVkIs.th.png', contactName: true }, { src: 's2.ax1x/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;
},

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。