微信小程序-view实现单选、多选

一、在微信小程序里面不使用radio怎么实现view的单选

 <view class="sign-setting-border {{idx==item.Item_id?'selected':''}}" wx:for="{{applyList}}" wx:key="" bindtap='selectApply' data-id="{{item.Item_id}}">{{item.Item_Name}}</view>

data:{
    idx:‘’，
    applyList:[
        {Item_id: "10", Item_Name: "公司"}
        {Item_id: "11", Item_Name: "职务"}
        {Item_id: "12", Item_Name: "行业"}
        {Item_id: "13", Item_Name: "家庭住址"}]
}
selectApply:function(e){
    let id = e.target.dataset.id
     this.setData({
       idx: id
     })
 },

二、在微信小程序里面不使用checkbox怎么实现view的多选

 <view class="sign-setting-border {{item.isSelect?'selected':''}}" wx:for="{{applyList}}" wx:key="" bindtap='selectApply'  data-index='{{index}}'>{{item.Item_Name}}</view>

data:{
  applyList:[
    {Item_id: "10", Item_Name: "公司", isSelect: false}
    {Item_id: "11", Item_Name: "职务", isSelect: false}
    {Item_id: "12", Item_Name: "行业", isSelect: false}
    {Item_id: "13", Item_Name: "家庭住址", isSelect: false}]

}

  selectApply:function(e){
    var index = e.currentTarget.dataset.index;
    var item = this.data.applyList[index];
    item.isSelect = !item.isSelect;
    this.setData({
      applyList: this.data.applyList,
    });
  },

附上wxss样式：

.sign-setting-border{
margin-left: 2%;
width:22%;
float: left;
height: 30px;
line-height: 30px;
border-radius: 20px;
background-color: #ffffff;
color: #999999;
font-size: 14px;
text-align: center;
font-family: -apple-system;
margin-bottom:15px;
border:1px solid #DBDBDB;

}
.selected{
  background-color: #FFA404;
  color: rgba(255, 255, 255, 1);
  border:1px solid #FFA404;
}