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

鍍金池/ 問(wèn)答/HTML/ 微信小程序列表點(diǎn)擊添加class,再點(diǎn)擊移除class

微信小程序列表點(diǎn)擊添加class,再點(diǎn)擊移除class

clipboard.png

這是我項(xiàng)目的一個(gè)列表。通過(guò)wx:for循環(huán)出來(lái)的。

<block wx:for="{{group1}}" wx:key='*this'>
  <view class='main-item'>
    <view class='group-name'>{{item.name}}組</view>
    <view class='country {{select1 == country.id ? "active" : ""}}' wx:key='*this' wx:for="{{item.country}}" wx:for-item='country' bindtap='selectCountry1' data-id='{{country.id}}'>
      <image src="{{country.icon}}" class='country-icon'></image>
      <text>{{country.countryName}}</text>
      <view class='border' data-status='border'></view>
    </view>
  </view>
</block>

這個(gè)是wxml的代碼,因?yàn)樯厦娴慕M名也是一個(gè)循環(huán)。所以嵌套了一個(gè)循環(huán)。。

.main-item{
  margin-left: 3%;
  margin-bottom: 3%;
  width: 45%;
  color: #fff;
  box-sizing: border-box;
}
.group-name{
  padding-left: 15rpx;
  height: 45rpx;
  background: #404c57;
  font-size: 30rpx;
  line-height: 45rpx;
}
.country{
  position: relative;
  padding: 15rpx;
  background: rgb(51, 67, 70);
  border-bottom: 1px solid #241323;
  font-size: 30rpx;
}
.country-icon{
  margin-right: 15rpx;
  width: 50rpx;
  height: 35rpx;
  vertical-align: middle;
}
.border{
  position: absolute;
  right: 15rpx;
  top: 18rpx;
  width: 35rpx;
  height: 35rpx;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
}

不知道怎么做才能做到點(diǎn)擊某一項(xiàng)的時(shí)候,讓它改變樣式,比如改變一下背景顏色。再點(diǎn)擊一次再變回去。
然后默認(rèn)剛進(jìn)頁(yè)面的時(shí)候是一項(xiàng)都沒(méi)有選中的。
接觸小程序不久、有沒(méi)有大佬帶飛。。謝謝。。

回答
編輯回答
敢試

單選,可以選擇使用radio標(biāo)簽,如果非要這樣,建議給數(shù)組添加true,false,其實(shí)跟其他語(yǔ)言寫(xiě)法一樣

2018年2月21日 18:58