小程序点击切换图片的代码怎么写

这篇文章主要介绍了小程序点击切换图片的代码怎么写的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇小程序点击切换图片的代码怎么写文章都会有所收获，下面我们一起来看看吧。

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

}

关于“小程序点击切换图片的代码怎么写”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“小程序点击切换图片的代码怎么写”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。