当前位置:  开发笔记 > 编程语言 > 正文

微信小程序实现简单Tab切换效果

这篇文章主要为大家详细介绍了微信小程序实现简单Tab切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现Tab切换效果的具体代码,供大家参考,具体内容如下

使用步骤

代码如下(示例):

定义一个状态status

data: {
   status: 0,
  },

代码如下(示例):

在点击切换时利用status来切换根据index下标来实现

js代码:

handtab(e) {
    console.log(e);
    let index = e.currentTarget.dataset.index
    console.log(index);
    this.setData({
      currentIndex: index,
      status: e.currentTarget.dataset.index
      //在点击切换时利用status来切换根据index下标来实现
    })
  },

wxml代码:


  
    {{item.name}}
    
  
  
    
    //在wxml中使用wx:if status == 0来改变tab切换下面的部分显示与隐藏
      
        
      
       {{item.goods_name}}
        ¥{{item.goods_price}}
      
    
  
  
  //status==1的情况
    2
  
  
   //status==2的情况
    3
  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

推荐阅读
U友50081205_653
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有