返回

专注连锁门店会员营销管理系统

线上+线下+进销存+收银+会员
获取验证码
立即登录
HiShop > Hi小程序 > 小程序开发 > 开发实例 >

小程序点击切换图片如何实现

2020-09-27 作者：黄珊


小程序中点击图片实现切换图片的效果，是非常简单普遍的的实现效果，下面为大家介绍小程序点击切换图片如何实现。
小程序点击切换图片如何实现
//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步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。

更多小程序开发案例，尽在：http://www.hishop.com.cn/xiaocx/kaifa.html


线上+线下+进销存+收银+会员门店零售管理好帮手

  • 极速收银管理

    门店能实现快速收银，提升门店经营效率。

  • 进销存管理

    系统自带进销存管理，更好管理库存销售。

  • 软硬件一体化

    配备收银硬件一站式整体服务。

收 银 会员管理 库存管理 商品管理 交接班 数据报表 营销促单 售后处理 多种收款

获取报价

推荐文章

门店系统 获取报价 立即咨询 免费试用