微信小程序选项卡功能

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

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

wxml:

<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>

如果是循环列表

<view class='menu_box'><text class='menu {{menuTapCurrent==index&&"borders"}}' data-current='{{index}}' catchtap='menuTap' wx:for='{{menuList}}' wx:key='this'>{{item}}</text>
</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:

data:{　　menuList:['menu1','menu2'],//如果用循环就有这个，没有循环就不用写这个　　menuTapCurrent:0//默认第一个被选中},  menuTap:function(e){var current=e.currentTarget.dataset.current;//获取到绑定的数据//改变menuTapCurrent的值为当前选中的menu所绑定的数据this.setData({menuTapCurrent:current});},

完结。

想了解更多的小程序的知识请添加微信小程序开发交流群：368506119

转载于:https://www.cnblogs.com/xjwy/p/7155669.html

微信小程序选项卡功能相关推荐

微信小程序插件功能页开发详细流程
有问题可以扫码加我微信,有偿解决问题.承接小程序开发. 微信小程序开发交流qq群 173683895 . 526474645 : 正文: 关于新出的微信小程序插件功能页做一下记录,希望能帮到大 ...
微信小程序php后台支付,微信小程序支付功能实现PHP实例详解
微信小程序支付功能实现PHP实例详解前端代码: wx.request({ url: 'https://www.yourhost.com/weixin/WeiActivity/payJoinfee' ...
微信 php收藏功能实现,关于微信小程序收藏功能的实现
这篇文章主要介绍了微信小程序收藏功能的实现代码,基本功能是点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目.需要的朋友可以参考下需求点击收藏后显示已收藏,在另一个页面出现目前点击收藏的项目 ...
python个人微信支付接口_Python实现微信小程序支付功能
正文由于最近自己在做小程序的支付,就在这里简单介绍一下讲一下用python做小程序支付这个流程.当然在进行开发之前还是建议读一下具体的流程,清楚支付的过程. 1.支付交互流程 2.获取openid( ...
vc++6.0获取磁盘基本信息_微信小程序——常用功能2：微信小程序用户登录，申请用户授权并获取用户基本信息...
微信小程序--常用功能2:申请用户授权并获取用户基本信息为了更好的用户体验,很多时候我们想要获取用户的基本信息,从而实现将信息呈现到用户界面.给用户划分地域.给用户分类等功能. 但是要想获取用户信息 ...
python微信小程序抢购_Python实现微信小程序支付功能！Python确实强的一批！
正文由于最近自己在做小程序的支付,就在这里简单介绍一下讲一下用python做小程序支付这个流程.当然在进行开发之前还是建议读一下具体的流程,清楚支付的过程. 1.支付交互流程 2.获取openid( ...
微信小程序支付功能用服务器吗,微信小程序支付功能服务器端（TP5.1）实现...
首先下载微信支付SDK ,将整个目录的文件放在 /application/extend/WxPay 目录下在使用SDK之前我们需要对 WxPay.Config.php 进行配置 namespace ...
智慧物业小程序_物业小程序物业微信小程序目前功能最全的物业小程序
原标题:物业小程序物业微信小程序目前功能最全的物业小程序以物业管理为核心,打造智慧社区云微信小程序管理平台,已入驻腾讯海纳社区,物业微信小程序,解决传统物业管理难,乱差的问题,利用微信小程序提供一整 ...
SpringBoot对接微信小程序支付功能开发（一，下单功能）
1,接入前准备: 接入模式选择直连模式: 申请小程序,得到APPID,并开通微信支付: 申请微信商户号,得到mchid,并绑定APPID: 配置商户API key,下载并配置商户证书,根据微信官方文档 ...
基于springboot微信小程序支付功能实现
基于springboot微信小程序支付功能实现简单的封装微信小程序支付功能,支付工具类所依赖的fastjson.lombok.wagegger, 1.添加maven依赖: 版本号可根据自己项目的实际 ...

微信小程序选项卡功能

微信小程序选项卡功能相关推荐

最新文章

热门文章