如何制作标签栏高亮(微信小程序)

本文介绍了一种在小程序中实现标签高亮切换的方法,通过定义一个变量控制标签状态,使用循环为每个标签添加点击事件,并通过动态绑定class事件对满足条件的标签设置样式,实现点击后标签的高亮显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

思想:
1、通过定义一个变量 来控制标签高亮
我这里定义的是show

   show: 0 //导航栏高亮

2、通过循环给每一个标签添加点击事件`

js代码如下

//通过点击事件   把index赋值给show
  gaoliang(e) {				
    this.setData({
      show: e.currentTarget.dataset.index    //赋值
    })
  },

html代码
通过 动态绑定class事件 对满足条件的标签设置样式

<view wx:for="{{typeList}}" wx:key="index" style="margin-left:30rpx"
  bindtap="gaoliang" data-index="{{index}}" class="{{show===index?'isAvtive':''}}">
		<view>{{item.name}}</view>
	</view>
<view class="top">
	<view wx:for="{{typeList}}" wx:key="index" style="margin-left:30rpx"
  bindtap="gaoliang" data-index="{{index}}" class="{{show===index?'isAvtive':''}}"
  >
		<view>{{item.name}}</view>
	</view>
</view>

效果点击标签高亮

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值