天下程序员首页cx06.com
管理 |  登录 |  注册
媛媛
笔记(共18个) > uni-app学习笔记

uniapp零基础学习:点击导航高亮显示小案例

阅读 0赞 0回复 2023-11-28 10:19:53

使用数据绑定的方式,做个点击导航高亮显示小案例。首先写个nav的盒子,里面的每一项用‘item’,数据的来源(定义一个navArr数组),简单配置一下(如下图)

下面就开始循环,循环item每一项,写for循环需要绑定一个key值(item:id)(如下图)

下面写下nav和item的样式,点击谁谁要高亮,前提是把这个类(active)写出来

现在要做个点击事件@click="clickNav",在methods中写出这个方法,通过clickNav这个函数传值@click="clickNav(index)",在methods中接收这个值,这个时候可以先console.log(e)普通输出一下,最后做一个判断navIndex:0,类里面做个:class动态绑定使用常用的三元表达式(:class="navIndex==index ? 'active':''"),动态改变navIndex的值(this.navIndex=e),成功了!


赞(0)

文章作者置顶的回复

全部回复列表 当前第(1)页

添加回复,文明发言,会审核.(服务区回复可以发广告)

作者最新笔记
天下程序员 www.cx06.com 程序员的网上家园!
作者微信:13126507001