小程序點(diǎn)擊切換圖片如何實(shí)現(xiàn)

小程序中點(diǎn)擊圖片實(shí)現(xiàn)切換圖片的效果，是非常簡單普遍的的實(shí)現(xiàn)效果，下面為大家介紹小程序點(diǎn)擊切換圖片如何實(shí)現(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://zytcm.com.cn/xiaocx/kaifa.html