小程序点击切换图片的代码怎么写
导读：本文共1106字符，通常情况下阅读需要4分钟。同时您也可以点击右侧朗读，来听本文内容。按键盘←（左） →（右） 方向键可以翻页。
摘要： //js Page({ data: { imgLIst: [ { url: `noClick1.jpg`, hoverUrl: `isClick1.jpg` }, { url: `noC... ...
目录
(为您整理了一些要点),点击可以直达。
//js
Page({
data: {
imgLIst: [
{
url: `noClick1.jpg`,
hoverUrl: `isClick1.jpg`
},
{
url: `noClick2.jpg`,
hoverUrl: `isClick2.jpg`
},
{
url: `noClick3.jpg`,
hoverUrl: `isClick3.jpg`
}
],
imgHoverIndex:0
},
chooseThis(e){
this.setData({
imgHoverIndex: e.currentTarget.dataset.index
})
}
})
// wxml
<block wx:for='{{imgLIst}}' wx:key='img'>
<view class='test' bindtap='chooseThis' data-index='{{index}}'>
<text>{{imgHoverIndex == index ?item.hoverUrl:item.url}}</text>
<image src='{{imgHoverIndex == index ?item.hoverUrl:item.url}}'></image>
</view>
</block>
// wxss
.test{
width: 200rpx;
float: left;
margin-right: 20rpx;
color: #fff;
text-align: center;
}
.test:nth-child(1){
background-color: red;
}
.test:nth-child(2){
background-color: green;
}
.test:nth-child(3){
background-color: blue;
}
.test image{
width: 200rpx;
height: 200rpx;
}
</div> <div class="zixun-tj-product adv-bottom"></div> </div> </div> <div class="prve-next-news">小程序点击切换图片的代码怎么写的详细内容，希望对您有所帮助，信息来源于网络。