小程序如何點(diǎn)擊切換圖片？

界面有六張圖片，點(diǎn)擊其中一張會(huì)切換成被點(diǎn)擊過(guò)的圖片，點(diǎn)擊其他的圖片也會(huì)換成被點(diǎn)擊過(guò)得圖片，上一個(gè)圖片切換回為被點(diǎn)擊的圖片圖片描述

回答

編輯回答

情皺

123asdfasdfa

2017年5月8日 17:37

編輯回答

敢試

老鐵看文檔啊

  <view class='box'>
    <view  class='box_list' wx:for="{{listInfo}}"  data-current="{{index}}" wx:key="this" bindtap="chooseImg">
        <image class="box-image" hidden='{{curIdx===index}}' src="{{item.imgUrl}}"></image>
        <image class="box-image" hidden='{{curIdx!==index}}' src="{{item.curUrl}}"></image>
        <text class="box-text">{{item.title}}{{index}}</text>
    </view>
  </view>

.box {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 20rpx;
}
.box_list{
    display: flex;
    flex-direction: column;
  align-items: center;
    justify-content: space-around;
    margin-top: 20rpx;
}
.box-image{
    height: 84rpx;
    width: 84rpx;
    margin-bottom: 10rpx;
}
.box-text{
    font-size: 28rpx;
}

Page({
  data: {
  curIdx:null,
  listInfo:[
      {
          title:'效果一',
          imgUrl: '../../image/icon-1.png',
          curUrl: '../../image/icon-1-cur.png',
      },
      {
        title: '效果二',
        imgUrl: '../../image/icon-2.png',
        curUrl: '../../image/icon-2-cur.png',
      },
      {
        title: '效果三',
        imgUrl: '../../image/icon-3.png',
        curUrl: '../../image/icon-3-cur.png',
      },
  ]
  },
   chooseImg: function (e) {
     this.setData({
       curIdx: e.currentTarget.dataset.current
     })
    //  console.log(e)
    //  console.log(this.data.curIdx) 
  }
})

2018年4月11日 14:03

編輯回答

雨萌萌

真的很基本啊啊啊啊

算了我真的也很閑

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

自己運(yùn)行吧

2018年4月6日 09:50