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

 更新时间:2021年05月13日 08:39:17   作者:零-J  
这篇文章主要为大家详细介绍了微信小程序实现简单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代码:

<view>
  <block wx:for="{{data}}" wx-key="index" class="list_top">
    <view data-index="{{index}}" class="list_one {{index==currentIndex?'active':''}}" bindtap="handtab">{{item.name}}
    </view>
  </block>
  <block wx:for="{{shopList}}" wx:key="index">
    <view class="shopList_box" bindtap="handDetail" data-id="{{item.goods_id}}" wx:if="{{status==0}}">
    //在wxml中使用wx:if status == 0来改变tab切换下面的部分显示与隐藏
      <view class="shopList_left">
        <image src="{{item.goods_big_logo}}"></image>
      </view>
      <view class="shopList_right"> <text class="right">{{item.goods_name}}</text>
        <text class="price">¥{{item.goods_price}}</text>
      </view>
    </view>
  </block>
  <block>
  //status==1的情况
    <view wx:if="{{status==1}}">2</view>
  </block>
  <block>
   //status==2的情况
    <view wx:if="{{status==2}}">3</view>
  </block>
</view>

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

相关文章

  • JavaScript中原始值和引用值深入讲解

    JavaScript中原始值和引用值深入讲解

    原始值代表原始数据类型的值,也叫基本数据类型,包括 Number、Stirng、Boolean、Null、Underfined,下面这篇文章主要给大家介绍了关于JavaScript中原始值和引用值深入讲解的相关资料,需要的朋友可以参考下
    2022-10-10
  • javascript级联下拉列表实例代码(自写)

    javascript级联下拉列表实例代码(自写)

    javascript下拉菜单想必大家在浏览网页的时候都会看到吧,已不是那么陌生了,本文介绍使用javascript实现级联下拉列表实例,感兴趣的朋友可以参考下哈,希望对你有所帮助
    2013-05-05
  • JavaScript常用脚本汇总(一)

    JavaScript常用脚本汇总(一)

    这篇文章主要介绍了JavaScript常用脚本汇总系列的第一篇,给大家分享的是jquery限制文本框只能输入数字、封装DOMContentLoaded事件、用原生JS对AJAX做简单封装、跨域请求之JSONP、千分位格式化,有需要的小伙伴们参考下吧。
    2015-03-03
  • 跟我学习javascript的隐式强制转换

    跟我学习javascript的隐式强制转换

    跟我学习javascript的隐式强制转换,感兴趣的小伙伴们可以学习一下
    2015-11-11
  • 微信小程序媒体组件详解(视频,音乐,图片)

    微信小程序媒体组件详解(视频,音乐,图片)

    这篇文章主要为大家详细介绍了微信小程序媒体组件的相关资料,包括视频,音乐,图片,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • 微信小程序分享小程序码的生成(带参数)以及参数的获取

    微信小程序分享小程序码的生成(带参数)以及参数的获取

    这篇文章主要介绍了微信小程序分享小程序码的生成(带参数)以及参数的获取,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • js promise 中使用 setTimeout 实现暂停执行的效果

    js promise 中使用 setTimeout 实现暂停执行的效果

    这篇文章主要介绍了js promise 中使用 setTimeout 实现暂停执行的,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-04-04
  • js的window.showModalDialog及window.open用法实例分析

    js的window.showModalDialog及window.open用法实例分析

    这篇文章主要介绍了js的window.showModalDialog及window.open用法,实例分析了window.showModalDialog与window.open方法的定义、功能与使用技巧,需要的朋友可以参考下
    2015-01-01
  • Javascript仿PHP $_GET获取URL中的参数

    Javascript仿PHP $_GET获取URL中的参数

    这篇文章主要介绍了Javascript仿PHP $_GET获取URL中的参数代码实例,需要的朋友可以参考下
    2014-05-05
  • javascript cookie的简单应用

    javascript cookie的简单应用

    这篇文章主要介绍了javascript cookie的简单应用,我们先介绍一下cookie的使用,以及我后面简单封装一个cookie操作的单例,便于实现cookie的设置,获取,删除的方法,感兴趣的小伙伴们可以参考一下
    2016-02-02

最新评论