【uniapp】单选框、复选框点击整行选中效果实现

单选框

<view class="list-item" v-for="(item, index) in cardList" :key="index" @click="radioChange(item)">
  <image class="list-item-icon" :src="item.bankUrl" mode=""></image>
  <view class="list-item-name">{{ item.bankName }}</view>
  <radio :value="item.cardNo" :checked="item.cardNo === cardNo" color="#F4858A" borderColor="#F4858A" style="transform: scale(0.75)" />
</view>

// 切换单选框
radioChange(item) {
  this.cardNo = item.cardNo
}

/deep/.uni-radio-input {
	margin-right: 0;
}

复选框

• 若在u-checkbox-group上绑定change事件来获取勾选的数组，则只能点击复选框拿到选中的数据，点击范围太小，不符合需求
• 要求点击一整行的任意位置都能选中，则只能绑定click时间来获取，但是需要虽然在行内绑定了click事件，且checkbox被包裹在里面，但是点击checkbox时并不会触发click事件，只会触发自身的change事件，所以需要在change事件里面再手动获取一下勾选的数据

<scroll-view class="list-container" v-if="attentionList.length" :scroll-y="true" @scrolltolower="loadNextPage">
  <u-checkbox-group placement="column">
    <block v-for="(item, index) in attentionList" :key="index">
      <view class="list-item" @click="checkboxGroupChange(item)">
      	<!-- uniapp的checkbox组件不能实现圆形的复选框样式，所以这里用的是uview的u-checkbox -->
        <u-checkbox class="list-item-checkbox" :checked="item.isChecked" :value="item.userinfo.numberId" shape="circle" size="32" iconSize="20" activeColor="#F4858A" @change="onCheck(index)"></u-checkbox>
        <zero-lazy-load class="list-item-avatar" :borderRadius="70" :image="item.userinfo.headUrl" :height="70" imgMode="aspectFill"></zero-lazy-load>
        <view class="list-item-name">{{ item.userinfo.nickName || '' }}</view>
      </view>
    </block>
  </u-checkbox-group>
  <view class="tips-box">
    <u-loadmore :status="loadStatus" :fontSize="20" nomore-text="没有更多了~" />
  </view>
</scroll-view>

// 切换列表单个复选框状态
onCheck(index) {
   this.attentionList[index].isChecked = !this.attentionList[index].isChecked
   // 获取选中数组
   this.checkedList = this.attentionList.filter(item => !!item.isChecked)
 },
 // 获取选中数组
 checkboxGroupChange(item) {
   this.attentionList.map(v => {
     if (v.userinfo.numberId == item.userinfo.numberId) {
       v.isChecked = !v.isChecked
     }
   })
   this.checkedList = this.attentionList.filter(item => !!item.isChecked)
 }

/deep/.u-checkbox__icon-wrap {
  margin: 0;
}