小程序实现多个选项卡切换

 更新时间:2020年06月19日 17:06:30   作者:Rechal_Mei  
这篇文章主要为大家详细介绍了小程序实现多个选项卡切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

选项卡的功能用途有很多地方:例如商品评论的切换,还有文章分类,还有各种各样的切换功能需要用到。这个实现是通过for循环,取数值下标的方式来实现切换

test.wxml

<view class='content'>
<view class='tab {{idx == index? "type-item-on" : ""}}' data-index='{{index}}' catchtap='tab' wx:for='{{tab}}' wx:key='key'>{{item.title}}</view>
</view>
<view wx:if='{{idx == 0}}' class='tab1' data-id='0' bindtouchmove="handletouchmove">1111</view>
<view wx:if='{{idx == 1}}' class='tab2' data-id='1' bindtouchmove="handletouchmove">222</view>
<view wx:if='{{idx == 2}}' class='tab3' data-id='2' bindtouchmove="handletouchmove">333</view>

test.wxss

page {
width: 100%;
height: 100%;
}
 
.content {
width: 100%;
display: flex;
justify-content: space-around;
}
 
.tab {
width: 30%;
height: 80rpx;
text-align: center;
line-height: 80rpx;
background: #f0f0f0;
padding: 5rpx;
}
 
.type-item-on {
border-bottom: 4rpx solid #e64340;
color: red;
}
 
.tab1 {
width: 100%;
height: 100%;
background: orange;
}

test.js

//logs.js
Page({
 
 /**
 * 页面的初始数据
 */
 data: {
 tab: [{
  title: '111',
  id: 0
 },
 {
  title: '222',
  id: 1
 },
 {
  title: '333',
  id: 3
 },
 
 ],
 idx: 0, //默认选中第一项
 
 
 },
 
 /**
 * 生命周期函数--监听页面加载
 */
 onLoad: function (options) {
 
 },
 // tab
 tab(e) {
 let that = this;
 let index = e.currentTarget.dataset.index;
 that.setData({
  idx: index,
 })
 
 }
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

相关文章

  • 18个JavaScript编写简洁高效代码的技巧分享

    18个JavaScript编写简洁高效代码的技巧分享

    在这篇文章中,小编将和大家分享18个JavaScript技巧,以及一些你应该知道的示例代码,以编写简洁高效的代码,感兴趣的小伙伴快跟随小编一起学习一下吧
    2024-01-01
  • JavaScript数值数组排序示例分享

    JavaScript数值数组排序示例分享

    在Javascript中我们已知有两个可以直接用来进行数组排序的方法reverse()和sort()。其中reverse()是按照反向对于数组进行排序的,而sort()是按照正向进行排序的。
    2014-05-05
  • 使用纯原生JS实现大文件分片上传

    使用纯原生JS实现大文件分片上传

    前段时间在工作中接触到了文件上传的内容,但业务中实现的功能比较简单,于是我想着能不能使用纯原生的方式实现一个大文件的上传DEMO,从而在本质上学习大文件上传的思路,本教程使用纯原生的html+node.js实现,需要的朋友可以参考下
    2024-06-06
  • javascript网页关键字高亮代码

    javascript网页关键字高亮代码

    非常不错的关键字高亮代码,用js实现,这个方法不错
    2008-07-07
  • 详解如何在Javascript中使用Object.freeze()

    详解如何在Javascript中使用Object.freeze()

    这篇文章主要介绍了详解如何在Javascript中使用Object.freeze(),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • js利用递归与promise 按顺序请求数据的方法

    js利用递归与promise 按顺序请求数据的方法

    这篇文章主要介绍了js利用递归与promise 按顺序请求数据,需要的朋友可以参考下
    2019-08-08
  • JS面向对象之多选框实现

    JS面向对象之多选框实现

    这篇文章主要为大家详细介绍了JS面向对象之多选框实现,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • js如何获取兄弟、父类等节点

    js如何获取兄弟、父类等节点

    本文为大家介绍下js获取兄弟、父类等节点的方法,感兴趣的朋友可以参考下
    2014-01-01
  • Javascript常用字符串判断函数代码分享

    Javascript常用字符串判断函数代码分享

    这篇文章主要分享了一段Javascript常用字符串判断函数的代码,基本上常见的字符串判断都涵盖在内了,非常实用,小伙伴们参考下。
    2014-12-12
  • 微信小程序弹窗禁止页面滚动的实现代码

    微信小程序弹窗禁止页面滚动的实现代码

    这篇文章主要介绍了微信小程序弹窗禁止页面滚动的实现代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12

最新评论