小程序點擊切換圖片的代碼怎么寫

這篇文章主要介紹了小程序點擊切換圖片的代碼怎么寫的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇小程序點擊切換圖片的代碼怎么寫文章都會有所收獲，下面我們一起來看看吧。

//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;

}

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