微信小程序動(dòng)態(tài)加載的圖片列表，怎么點(diǎn)擊某張圖片更改樣式？

圖片描述

如圖，整個(gè)列表是wx:for循環(huán)出來(lái)的，希望點(diǎn)擊右邊小圖片（小圖片也是wx：for循環(huán)出來(lái)的）給該圖片加邊框顏色，并且左邊大圖改為對(duì)應(yīng)的小圖，求教

回答

編輯回答

大濕胸

就是一個(gè)選項(xiàng)卡功能
wxml

 <view wx:for="{{banners}}"  wx:for-item="banner" wx:for-index="idx" >
 <image src="{{banner.img}}" />
 <view>
  <image wx:for="{{banner.imgs}}" data-idx="{{idx}}"  data-index="{{index}}"class="thumbnail {{banner.index==index?'cur':''}}" src="{{item}}"  catchtap="showBanner" />
 <text> {{banner.index}}</text>
 </view>
</view>

wxss

.thumbnail{
  width: 100rpx;
  height: 100rpx;
  margin-right: 10rpx;
   border: 2px solid transparent;
}
.cur{
  border: 2px solid red;
}

Page({
    data: {
         banners: [
          {
            index: 0,
            img: 'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=a80e4a17ae014c080d3620f76b12696d/42166d224f4a20a40709fb7997529822720ed07d.jpg',
            imgs: ['https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=a80e4a17ae014c080d3620f76b12696d/42166d224f4a20a40709fb7997529822720ed07d.jpg', 'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=00c4cfe352fbb2fb202650402e234bc1/d62a6059252dd42a711ec615043b5bb5c9eab87d.jpg', 'https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike150%2C5%2C5%2C150%2C50/sign=66342e1187d4b31ce4319ce9e6bf4c1a/54fbb2fb43166d22639320c64a2309f79152d2ff.jpg', 'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=9e8ac1c952df8db1a8237436684ab631/3ac79f3df8dcd100784b38707e8b4710b8122f88.jpg'],

          },
          {
            index: 0,
            img: 'https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=005e5fcd9aef76c6c4dff379fc7f969f/9358d109b3de9c8234db74636681800a18d843a4.jpg',
            imgs: ['https://gss1.bdstatic.com/-vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=005e5fcd9aef76c6c4dff379fc7f969f/9358d109b3de9c8234db74636681800a18d843a4.jpg', 'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=53d730f8daa20cf4529df68d17602053/8d5494eef01f3a2927a062b19325bc315c607c60.jpg', 'https://gss0.bdstatic.com/-4o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=d45d73693f7adab429dd1311eabdd879/562c11dfa9ec8a134f6397a1fe03918fa0ecc072.jpg', 'https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=5354a1279925bc313f5009ca3fb6e6d4/7e3e6709c93d70cf4566dee4f8dcd100bba12bbe.jpg'],

          },
          {
            index: 0,
            img: 'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=47772d4895510fb36c147fc5b85aa3f0/8326cffc1e178a8218bb1c51fd03738da877e8b8.jpg',
            imgs: ['https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=47772d4895510fb36c147fc5b85aa3f0/8326cffc1e178a8218bb1c51fd03738da877e8b8.jpg', 'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike116%2C5%2C5%2C116%2C38/sign=4ab22f86f91fbe090853cb460a096756/e850352ac65c1038623ade32b9119313b17e89fd.jpg', 'https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=82905fe6e0f81a4c323fe49bb6430b3c/5882b2b7d0a20cf4bf0e134d7d094b36adaf9982.jpg', 'https://gss0.bdstatic.com/94o3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=83659ab63212b31bd361c57be7715d1f/622762d0f703918f50043b3b5a3d269758eec46e.jpg', 'https://gss2.bdstatic.com/-fo3dSag_xI4khGkpoWK1HF6hhy/baike/c0%3Dbaike92%2C5%2C5%2C92%2C30/sign=c2765b7686b1cb132a643441bc3d3d2b/b8014a90f603738d5fa93cbbb81bb051f919ec4c.jpg'],

          },
        ],
    },
    showBanner:function(e){
      let i = e.target.dataset.idx,
          j = e.target.dataset.index,
          banners = this.data.banners;
      banners[i].index=j;
      banners[i].img = banners[i].imgs[j]
      this.setData({ 
        banners: banners
      })
    }
})

完整案例

2017年2月16日 02:12

編輯回答

老梗

用index不行，你看下那些小圖片有沒(méi)有區(qū)別，比如給他們添加一個(gè)和其他小圖片不一樣的屬性，我之前也寫(xiě)過(guò)一個(gè)這樣的

 <text bindtap="changecity" wx:for-item="othercities" wx:for="{{firstname[firstnameindex].city}}" wx:for-index="othercitiesindex" wx:key="index" data-value="{{othercities}}">{{othercities}} </text>

我這個(gè)是通過(guò)value去判斷，如果你的那些小圖片沒(méi)有區(qū)別，那我也沒(méi)辦法了。實(shí)在不行你可以利用image的src屬性

2018年9月13日 17:04