[JavaScript知识库]uniapp手写单选

尽管uniapp 有 radio单选组件，但像一些情况下还是自己写出来好一些：

比如这里，有选择，删除，添加等功能。代码如下：

<view class="locaOne" v-for="(item,index) in localList">
					<view class="loLeft">
						<view class="checkView"  @click="clickCheck($event,index)"  :data-obj="item">
							<image v-show="item.is_default == 0" class="checkedFont" src="../../static/images/check.png"></image>
							<image v-show="item.is_default == 1" class="checkedFont" src="../../static/images/orderAccuess.png"></image>
						</view>
						<view class="addressName">{{item.address}}</view>
					</view>
					<view class="loRight" @click="deleteAddress($event,index)" :data-id="item.id">
						<image class="delete" src="../../static/images/guanbi.png"></image>
					</view>
				</view>

data:{    
    localList:[],
}				

这个地址列表是向后端请求来的；然后选择默认地址：

原理就是点击选中，is_default=1；然后其他都不选中，这就要把选中的追加在一个数组里，循环连个数组（双重循环）?that.localList[inItem].is_default = 0 ，表示点击之外的都属不选中状态。最后清空数组?indexArr。

clickCheck(e,index){
    let that = this;
				console.log(index);
				that.localList[index].is_default = 1;
				that.localList.forEach((item,loIndex)=>{
					that.indexArr.push(loIndex);
				})
				that.indexArr.splice(index,1);
				that.localList.forEach((item,loIndex)=>{
					that.indexArr.forEach((inItem,inIndex)=>{
						that.localList[inItem].is_default = 0
					})
				})
				that.indexArr=[];
            //是对接口内容
            …………
}

?删除的话线上与线下有一点区别，线上直接对接口，传id过去，删除成功后调一个查询即可。线下需要用splice移除那一列。

//删除地址
deleteAddress(e,index){
    let that = this;
	let id = e.currentTarget.dataset.id;
	console.log(id);
    uni.showModal({
	title: '提示',
	content: '这是一个模态弹窗',
	success: function (res) {
		if (res.confirm) {
			console.log('用户点击确定');
           that.localList.splice(index,1); //本地删除
		} else if (res.cancel) {
			console.log('用户点击取消');
		}
	}
});
}