在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 微信小程序如何動態(tài)修改一組view的屬性值？

微信小程序如何動態(tài)修改一組view的屬性值？

問題描述 我想創(chuàng)建三個圖片，中間的的opaccity值為1，其余為0.5，點擊哪張哪張的opacity變?yōu)?，其余的圖片變?yōu)?.5，在小程序中不能獲取dom，不知道該如何操作？
實踐過程代碼
wxml 部分代碼:

<view class="choose" >
    <view class="tu" wx:for="{{array}}" data-opacity="{{item.opacity}}" style='background:url({{item.url}});opacity:{{item.opacity}};background-size: 100% 100%;' bindtap='toggle'></view>
  </view>

js 部分代碼:

  data: {
  array:[{
    url: 'shen1.png',
    opacity: '0.5'
  },{
      url: 'shen2.png',
      opacity: '1'
  },{
      url: 'hen3.png',
      opacity: '0.5'
  }]
}}

 toggle:function(e){
    let that = this;
    console.log(e.target.dataset.opacity);
    let opacity = e.target.dataset.opacity == '1' ? '0.5' : '1';
    console.log(opacity);
    //e.target.dataset.opacity=opacity; 這樣不能賦值成功
 }
回答
編輯回答
糖果果

你要修改的是 array 里的對應 opacity。直接改了下，木有跑過代碼哦。

<view class="choose" >
    <view class="tu" wx:for="{{array}}" data-id="{{item.id}}" style='background:url({{item.url}});opacity:{{item.opacity}};background-size: 100% 100%;' bindtap='toggle'></view>
</view>
data: {
  array:[{
    url: 'shen1.png',
    opacity: '0.5',
    id: 1
  },{
      url: 'shen2.png',
      opacity: '1',
      id: 2
  },{
      url: 'hen3.png',
      opacity: '0.5',
      id: 3
  }]
}}

 toggle(e){
    let that = this;
    console.log(e.target.dataset.id);
    this.setData({
        array: this.data.array.map(v => {
            return e.target.dataset.id === v.id ? {...v, opacity: '1'} : {...v, opacity: '0.5'}
        })
    })
 }
2018年5月23日 11:51
編輯回答
萢萢糖
    <view class="tu" wx:for="{{array}}" data-index="{{index}}" wx:key="{{index}}" style='background:url({{item.url}});opacity:{{item.opacity}};background-size: 100% 100%;' bindtap='toggle'></view>
toggle (e) {
    let myindex = e.currentTarget.dataset.index;
    this.data.array = this.data.array.map((item,index)=>{
      if(myindex===index){
        item.opacity = '1'
      }else{
        item.opacity = '0.5'
      }
      return item;
    });  
    this.setData({
      array:this.data.array
    })
  }

這樣做不是很好，當然有好點的方案

<view class="tu" wx:for="{{array}}" wx:key="{{index}}" data-index="{{index}}" style='background:url({{item.url}});opacity:{{index===activeindex?"1":"0.5"}};background-size: 100% 100%;' bindtap='toggle'></view>

在data里添加一個activeindex:0

 toggle (e) {
    let myindex = e.currentTarget.dataset.index;
    this.setData({
      activeindex:myindex
    })
  }
2017年2月27日 18:51