vue实现点击高亮效果
·
<view class="tabs">
<text
v-for="(item, index) in subTypes"
:key="item.id"
class="text"
:class="{ active: index === activeIndex }"//动态绑定高亮类:判断下标是否等于当前下标
@tap="activeIndex = index" //通过点击事件切换当前的下标赋给高亮下标
>{{ item.title }}</text
>
</view>
<!-- 推荐列表 -->
<scroll-view
enable-back-to-top
v-for="(item, index) in subTypes"
:key="item.id"
v-show="activeIndex === index" //并展示对应的数据列表,没有点击的tab信息就不展示
scroll-y
class="scroll-view"
@scrolltolower="onScrolltolower"
>
//默认 高亮的下标为第一个
const activeIndex = ref(0)
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐


所有评论(0)