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

最新推荐文章于 2025-09-01 15:13:09 发布

原创最新推荐文章于 2025-09-01 15:13:09 发布 · 1.4w 阅读

62 ·

CC 4.0 BY-SA版权

文章标签：

#单选 #多选

微信小程序专栏收录该内容

55 篇文章

订阅专栏

本文介绍如何在微信小程序中实现视图的单选和多选功能，不使用radio和checkbox组件，通过绑定tap事件并更新数据来达到目的。

部署运行你感兴趣的模型镜像

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

您可能感兴趣的与本文相关的镜像