小程序點(diǎn)擊切換圖片的代碼怎么寫

這篇文章主要介紹了小程序點(diǎn)擊切換圖片的代碼怎么寫的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇小程序點(diǎ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;

}

關(guān)于“小程序點(diǎn)擊切換圖片的代碼怎么寫”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“小程序點(diǎn)擊切換圖片的代碼怎么寫”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。