单选框
<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)">
<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;
}