wxml：
<view class="hzl">
<block wx:for='{{hzMap}}' wx:key='img'>
<view class="hzl_a {{item.show}}">
<image class="img4" src='{{item.url}}'></image>
</view>
</block>
</view>
<block wx:for='{{imgList}}' wx:key='img'>
<view class='main_one' bindtap='chooseThis' data-index='{{index}}'>
<image class="main_one" src='{{imgHoverIndex == index ?item.hoverUrl:item.url}}'></image>
<text class=" {{imgHoverIndex == index?'active':'noactive'}} ">
{{imgHoverIndex == index ?item.text:item.text}}
</text>
</view>
</block>
<block wx:for='{{imageList}}' wx:key='img'>
<view class='main_one' bindtap='chThis' data-index='{{index}}'>
<image class="main_one" src='{{imgIndex == index ?item.hoverUrl:item.url}}'></image>
<text class=" {{imgIndex == index?'active':'noactive'}} ">
{{imgIndex == index ?item.text:item.text}}
</text>
</view>
</block>
js：
data: {
imgList: [{
url: '../image/select1.png',
hoverUrl: '../image/select11.png ',
text: '巴洛克米黄GLC-03'
}, {
url: '../image/select2.png',
hoverUrl: '../image/select22.png ',
text: '葡萄牙米黄-浅GLC-01'
}, {
url: '../image/select3.png',
hoverUrl: '../image/select33.png ',
text: '锈石 TSJ-YL008'
}, {
url: '../image/select4.png',
hoverUrl: '../image/select44.png ',
text: '黄金麻 TSJ-YL007'
}],
imageList: [{
url: '../image/select5.png',
hoverUrl: '../image/select55.png ',
text: '纯彩石 RCS-RS008'
}, {
url: '../image/select6.png',
hoverUrl: '../image/select66.png ',
text: '印度红 TSJ-RL005'
}, {
},
{
}
],
hzMap: {
"00": {
url: '../image/hzl00.png',
show: ''
},
"01": {
url: '../image/hzl01.png',
show: ''
},
"10": {
url: '../image/hzl10.png',
show: ''
},
"11": {
url: '../image/hzl11.png',
show: ''
},
"20": {
url: '../image/hzl20.png',
show: ''
},
"21": {
url: '../image/hzl21.png',
show: ''
},
"30": {
url: '../image/hzl30.png',
show: ''
},
"31": {
url: '../image/hzl31.png',
show: ''
}
},
imgHoverIndex: 0,
imgIndex: 0
},
chooseThis(e) {
const select = e.currentTarget.dataset.index
if (this.data.imgList[select].url) {
this.setData({
imgHoverIndex: e.currentTarget.dataset.index
})
}
this.setBannerActive();
},
chThis(e) {
const selectIndex = e.currentTarget.dataset.index;
if (this.data.imageList[selectIndex].url) {
this.setData({
imgIndex: e.currentTarget.dataset.index
})
console.log(selectIndex);
}
this.setBannerActive();
},
setBannerActive() {
let hzMap1 = this.data.hzMap;
for (let hzObj in hzMap1) {
hzMap1[hzObj].show = '';
}
hzMap1[`${this.data.imgHoverIndex}${this.data.imgIndex}`].show = 'show';
this.setData({
hzMap: hzMap1
});
},
onLoad: function(options) {
this.setBannerActive();
},