您当前的位置：首页 > 小程序开发网站首页小程序开发

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

发布时间：2019-08-01编辑：九零後约定查看次数：5549

一、在微信小程序里面不使用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;

}