鍍金池/ 問答/HTML/ 小程序中如何處理這種情況？

小程序中如何處理這種情況？

clipboard.png

需求：當(dāng)用戶點(diǎn)擊不同的按鈕時，按鈕的顏色發(fā)生變動。（需要點(diǎn)擊點(diǎn)擊多個，每點(diǎn)擊一個變一個。最要也要獲取點(diǎn)擊的id值）
思路：在渲染數(shù)據(jù)時，綁定一個標(biāo)志位tag
wxml:
<block wx:for='{{type_list}}'>

      <view bindtap='getTypeId' 
      data-listid='{{item.id}}' 
      data-itemall = '{{item}}'
      class='{{item.tag == 1 ? " " : "active-sty"}}' >{{item.type}}</view>
    </block>

js:
//選擇類型數(shù)據(jù)
getTypeId:function(e){

let _this = this;
let _id = parseInt(e.currentTarget.dataset.itemall.id);
console.log(typeof _id,)
_this.setData({
  'type_list[_id].tag' : 2
});

},

這種情況下會報錯。

感覺小程序的實(shí)現(xiàn)與vue不太一樣。
問題：如何實(shí)現(xiàn)這種需求？

回答
編輯回答
壞脾滊

試試直接用css偽類改變顏色

<input class="btn" type="button" value="btn">

<style>
.btn:hover {
    background: yellow;
}
.btn:active {
    background: red;
}
</style>
2017年11月15日 07:38
編輯回答
厭惡我
  • 給每個按鈕一個唯一標(biāo)識符，data-index或者其他自定義
  • 給每個按鈕綁定事件，獲取到按鈕唯一標(biāo)識符
  • 更新activeIndex當(dāng)前選中值
  • 對比按鈕標(biāo)識符與activeIndex，相等則給active類

代碼

<view class="row">
  <button wx:for="{{btnArr}}" class="{{activeIndex===index?'active':''}}" data-index="{{index}}" bindtap='choose'>{{item.btnName}}</button>
</view>
<view>你現(xiàn)在選擇的是按鈕是</view>
<view>{{btnArr[activeIndex].btnName}}</view>
<view>id:{{btnArr[activeIndex].btnId}}</view>

const app = getApp()

Page({
  data: {
    btnArr: [
      {
        btnName: '自助立案',
        btnId: '1'
      },
      {
        btnName: '自助查詢',
        btnId: '2'
      },
      {
        btnName: '自助閱卷',
        btnId: '3'
      },
      {
        btnName: '庭審播放',
        btnId: '4'
      }
    ],
    activeIndex:null,
  },
  choose:function(e){
    this.setData({
      activeIndex:e.currentTarget.dataset.index
    })
  },
  onLoad: function () {
   
  }
})
data中的btnId主要是為數(shù)據(jù)交互做鋪墊，向后臺告知選中了那個按鈕，data實(shí)際數(shù)據(jù)以后臺給出的數(shù)據(jù)接口為準(zhǔn)。

效果圖

圖片描述

2017年3月15日 19:14