小程序點擊切換圖片如何實現(xiàn)
2020-09-27|HiShop
導(dǎo)讀:小程序中點擊圖片實現(xiàn)切換圖片的效果,是非常簡單普遍的的實現(xiàn)效果,下面為大家介紹小程序點擊切換圖片如何實現(xiàn)。...
小程序中點擊圖片實現(xiàn)切換圖片的效果,是非常簡單普遍的的實現(xiàn)效果,下面為大家介紹小程序點擊切換圖片如何實現(xiàn)。
//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;
}
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。
更多小程序開發(fā)案例,盡在:http://m.descansotropical.com/xiaocx/kaifa.html