底部tap切换同一个盒子只能单击一次,多次点击不会出现效果,只有点击另外一个盒子才能触发点击事件

37 篇文章 1 订阅
36 篇文章 1 订阅

直接上代码吧,关键步骤会备注上面:

<template>
	<view>
		<view style="position: sticky; bottom: 0; width: 100%; display: flex; height: 174rpx; background-color: #ffffff; border-top: 1rpx solid #F0F0F0;">
			<view style=" display: flex; flex-flow: column wrap; justify-content: center; align-items: center; margin-top: 10rpx; width: 50%; height: 94rpx;" @tap="switchImage(true)">
				<view style="width: 48rpx; height: 48rpx;">
					<image v-if="isBoxSelected" src="/static/image1.jpg"  mode="aspectFit" style="width: 48rpx; height: 48rpx;"></image><!--点击isBoxSelected=false时的的图片-->
					<image v-else src="/static/image2.jpg"  mode="aspectFit" style="width: 48rpx; height: 48rpx;"></image><!--点击--><!--点击isBoxSelected=true时的的图片-->
				</view>
				<view style="width: 80rpx; font-size: 20rpx; height: 28rpx; line-height: 28rpx;">
					发起申请
				</view>
			</view>
			<view style=" display: flex;  flex-flow: column wrap; justify-content: center; align-items: center;  margin-top: 10rpx; width: 50%; height: 94rpx;" @tap="switchImage(false)">
				<view style="width: 48rpx; height: 48rpx;">
					<image v-if="!isBoxSelected" src="/static/image3.jpg" mode="aspectFit" style="width: 48rpx; height: 48rpx;"></image><!--点击isBoxSelected=true时的的图片-->
					<image v-else src="/static/image4.jpg" mode="aspectFit" style="width: 48rpx; height: 48rpx;"></image><!--点击--><!--点击isBoxSelected=false时的的图片-->
				</view>
				<view style="width: 80rpx; font-size: 20rpx; height: 28rpx; line-height: 28rpx;">
					审批中心
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data()
		{
			return{
				isBoxSelected: false,//默认选中第二个盒子
			}
		},
		methods:{
			switchImage(e){
				this.isBoxSelected = e;
				console.log(this.isBoxSelected) //将true和false传入给isBoxSelected
			}
		}
	}
</script>

<style>
</style>

运行效果:

因为默认选中的是第二个所以刚开始isBoxSelected: false, 但是第二个的v-if判断是取反的!isBoxSelected = true 第一个v-if中的表达式就等于 isBoxSelected: false,

点击第一个盒子后:

重复点击同一个盒子是不会改变图片的样式的,比如重复点击第二个盒子,isBoxSelected就一直等于false,但是第二个盒子是取反的!isBoxSelected,所以等于true,第二个盒子就是蓝色图标

也可以怎么说。当isBoxSelected: false时,第二个图表变成蓝色,当isBoxSelected: true时第一个图表变成蓝色

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值