当前位置：首页 > 日记 > 正文

微信小程序实现选项卡功能

微信小程序实现选项卡功能

本文实例为大家分享了微信小程序选项卡功能展示的具体代码，供大家参考，具体内容如下

首先看看微信小程序上的选项卡的效果：

原理呢，就是先布局好（这就不必说了吧），然后在上面的每一个选项卡上都定义一个同样的点击事件，然后给每一个组件上绑定一个唯一的标识符，然后点击事件触发的时候，获取到绑定的标识符，判断当前点击的是哪个选项卡，然后再判断下面该显示哪一块，现在上代码：

w

<view class="menu_box"> <text class='menu1 {{menuTapCurrent=="0"?"borders":""}}' data-current="0" catchtap="menuTap">menu1</text> <text class='menu2 {{menuTapCurrent=="1"?"borders":""}}' data-current="1" catchtap="menuTap">menu2</text></view><view class="tab1" hidden="{{menuTapCurrent!='0'}}">tab1</view><view class="tab2" hidden="{{menuTapCurrent!='1'}}">tab2</view>

wxss:

.menu_box{ display: flex; height: 80rpx;}.menu1,.menu2{ flex: 1; font-size:30rpx; line-height: 80rpx; text-align: center;}.borders{ border-bottom: 4rpx solid #f00; color: #f00;}.tab1,.tab2{ height: 300rpx; background: #23bff3;}.tab2{ background: #ccc;}

JS:

 menuTap:function(e){ var current=e.currentTarget.dataset.current;//获取到绑定的数据 //改变menuTapCurrent的值为当前选中的menu所绑定的数据 this.setData({  menuTapCurrent:current }); },

完结。

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

选项卡功能程序电脑软件微信小  

热门内容

相关文章

Vue中使用vux的配置详解

Vue中使用vux的配置详解

配置详解,电脑软件,Vue,vux，Vue中使用vux的配置，分为两种情况：一、根据vux文档直接安装，无需手动配置npm install vue-cli -g // 如果还没安装vue init airyland/vux2 my-project // 创建名为 my-project 的模板cd my-project // 进入项目n…

Server.MapPath | 错误 ’ASP 017

Server.MapPath | 错误 ’ASP 017

字符,错误,不允许,电脑软件,MapPath，未启用父路径 症状举例： Server.MapPath() 错误 &rsquo;ASP 0175 : 80004005&rsquo; 不允许的 Path 字符 /0709/dqyllhsub/news/OpenDatabase.asp，行 4 在 MapPath 的 Path 参数中不允…

win2003 IIS 500内部服务器错误（典

win2003 IIS 500内部服务器错误（典

数据库,服务器,错误,解决方案,典型，IIS正确设置步骤： 一、启用Asp支持 Windows Server 2003 默认安装，是不安装 IIS 6 的，需要另外安装。安装完 IIS 6，还需要单独开启对于 ASP 的支持。 第一步，启用Asp，进入：控制面板 -> 管理工具 ->IIS(Internet…

INdesign CS6怎么在A4的页面添加A3

INdesign CS6怎么在A4的页面添加A3

页面,尺寸,电脑软件,INdesign，INdesign CS6中想要在原有的文档里面添加一个别的尺寸的页面，该怎么设置页面尺寸呢？下面我们就来看看详细的教程。软件名称：Adobe InDesign CS6 中文免费版软件大小：878.42MB更新时间：2014-05-261、打开一个ID文档，…

Spring获取ApplicationContext对象

Spring获取ApplicationContext对象

工具类,方法,对象,电脑软件,Spring， Spring获取ApplicationContext对象工具类的实现方法（1）实现的工具类：package com.util; import org.springframework.context.ApplicationContext; import org.springframework.context.support.ClassPath…

安装iis程序无法复制文件CONVLOG.E

安装iis程序无法复制文件CONVLOG.E

复制文件,安装,解决办法,程序,电脑软件，要装IIS测试一个分类信息的网站，可是系统盘不在，只能从网上下载，结果在安装的时候出现一个错误提示&ldquo;安装程序无法复制文件staxmem.dl_&rdquo;，上网找了下资料，说是在开始－运行中输入&rdquo;esentutl …

windows系统用cmd命令安装及卸载服

windows系统用cmd命令安装及卸载服

安装,系统,卸载,命令,服务，方法一1、开始 ->运行 ->cmd。2、cd到C:WINDOWSMicrosoft.NETFrameworkv2.0.50727(Framework版本号按IIS配置)。3、 安装服务： 运行命令行 InstallUtil.exe E:/test.exe；卸载服务： 运行命令行 InstallUtil.exe -u E:…

IIS出现错误后如何完全重装

IIS出现错误后如何完全重装

重装,出现错误,电脑软件,IIS，有的时候IIS出现严重错误，比如metabase坏掉，又没有备份....一般的做法，直接在控制面板添加删除程序中卸载IIS重装。这样并不是保险的做法，很多人在重装IIS后问题依旧。所以建议在任何情况下都用以下步骤重新安装IIS…

PHP中for循环与foreach的区别

PHP中for循环与foreach的区别

循环,区别,电脑软件,PHP,foreach，for循环与foreach的区别foreach 依赖 IEnumerable.第一次 var a in GetList() 时调用 GetEnumerator 返回第一个对象并赋给a,以后每次再执行 var a in GetList() 的时候调用 MoveNext.直到循环结束.期间Get…

jQuery实现radio第一次点击选中第

jQuery实现radio第一次点击选中第

取消,功能,电脑软件,jQuery,radio，由于项目的需求，要求radio点击两次后为取消状态，不方便修改为checkbox，可以用正面的方法实现。// jquery $('input:radio').click(function(){ //alert(this.checked); // var $radio = $(this);…

word2010怎样给添加文字word2010给

word2010怎样给添加文字word2010给

文字,步骤,方法,图片,电脑软件，　　在日常生活中，我们可以看到电视、广告、报纸、书籍会在图片上添加文字。在图片上添加文字说明不仅能够起到解释说明的作用，还能起到美化形象的效果。那么，这种图片效果怎么制作呢?下面小编就教你怎么用word2…

PHP实现双链表删除与插入节点的方

PHP实现双链表删除与插入节点的方

双链表,删除,方法,插入节点,示例，本文实例讲述了PHP实现双链表删除与插入节点的方法。分享给大家供大家参考，具体如下：概述：双向链表也叫双链表，是链表的一种，它的每个数据结点中都有两个指针，分别指向直接后继和直接前驱。所以，从双向链表中的任…