|
這里的示列是圖標的切換-選中與未選中樣式-因點擊此圖標是直接跳轉(zhuǎn)其它頁面的-所以沒有考慮點擊顯示再次點擊隱藏效果（類似js的toggle效果）-因為不需要。  方法一：--動態(tài)更改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; // 被點擊時傳遞的參數(shù) var queryIndex = e.currentTarget.dataset['index']; var select_icon = _that.select_icon(); // 被點擊時傳遞的參數(shù) var queryIndex = e.currentTarget.dataset['index']; // rotateList獲取到原圖片數(shù)組--iconList_src-重定義數(shù)組圖片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; // 被點擊時傳遞的參數(shù) 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獲取到原圖片數(shù)組 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; }, |
|
|
