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

最新推荐文章于 2024-10-21 15:01:09 发布

原创最新推荐文章于 2024-10-21 15:01:09 发布 · 491 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端

环境及插件安装同时被 2 个专栏收录

36 篇文章

订阅专栏

微信小程序

30 篇文章

订阅专栏

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

思想：
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>