uniapp如何切换元素选中与未选中的状态

161 阅读1分钟

使用场景如下图,当用户选择对应支付方式的时,切换元素选中状态。

QQ截图20211129154907.png

1、现在data中声明type变量,变量值分别是:scorePay与alipay

data() {
    return {
	type:"alipay"
	}
},

2、给需要点击的元素绑定点击事件

<view class="whiteBg pd mt10">
	<view class="fz16 bb pb">支付方式</view>
	<view class="flex  pt" @tap="switchStatus('scorePay')">
		<view class="w20 flex ct">
			<image class="w100p" src="../../static/waitIssue/integral.png" mode="widthFix"></image>
		</view>
		<view class="cover ml8">拼团积分</view>
		<view class="w40 text-right">
			<image v-if="type == 'scorePay'" class="w20 h20" src="../../static/goodsInfo/chooseCur.png" mode=""></image>
			<image v-else class="w20" src="../../static/goodsInfo/choose.png" mode="widthFix"></image>
		</view>
	</view>
	
	<view class="flex  pt"  @tap="switchStatus('alipay')">
		<view class="w20 flex ct">
			<image class="w100p" src="../../static/waitIssue/alipay.png" mode="widthFix"></image>
		</view>
		
		<view class="cover ml8">支付宝支付</view>
		<view class="w40 text-right">
			<image v-if="type == 'alipay'" class="w20 h20" src="../../static/goodsInfo/chooseCur.png" mode=""></image>
			<image v-else class="w20" src="../../static/goodsInfo/choose.png" mode="widthFix"></image>
		</view>
	</view>
</view>

3、在mehod中声明这个点击事件

switchStatus(type){
	this.type = type ;
},