原生微信小程序实现tab切换效果demo

最新推荐文章于 2024-06-02 19:15:42 发布

sun_wei_tao

最新推荐文章于 2024-06-02 19:15:42 发布

阅读量960

点赞数 3

分类专栏： WeChat javascript css 文章标签： javascript css 前端 css3 html

本文链接：https://blog.csdn.net/qq_43447509/article/details/107821854

版权

本文介绍了如何使用原生微信小程序实现tab切换效果，通过Wxml结构和CSS样式实现动态内容展示。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

Wxml

<!-- tab框  -->
<view class="nav_title">
  <view class="nav_tab">
  <!-- 如果选中的下表等于当前的索引，就使用active class名，否则class名为common -->
    <view wx:for="{
    {list}}" 
      wx:key="list" 
      class="{
    {selected==index?'active':'common'}}" 
      data-index='{
    {index}}' 
      bindtap="selected">
    {
  {item}}
  <!-- 如果选中的下表等于当前