微信小程序官方自带tab选项卡
title: tab选项卡
date: 2018-08-28 16:02:11
tags: 微信小程序
微信小程序文档在框架中有介绍
tabBar只能配置最少两个最多五个
如果想让哪个文件出现tabBar必须把这个文件放在tabBar中的list数组下
以上说的都是微信小程序中给的tabBar这个配置的框架
下面说一说 自定义的tab选项功能的实现
tab选项功能实现
首先要把样式写出来 让后在heml标签上面加上自定义的id data-id 加上点击事件 当点击的时候获取 属性中的id值 但是要用e.currentTarget.id比较稳定
e.target.id e.target 代表的是,实际触发了点击事件的组件。
e.currentTarget 代表的是,注册了监听点击事件的组件。
然后在js中把点击的当前的id值给data wxml页面通过获取data中的属性的值判断添加类名 实现点击的样式的切换 在在下面写上几个页面 同时也获取data中的状态实现隐藏显示
具体代码示例如下所示
```
wxml的代码
笔记
关于我
收藏
活动
1
2
3
4
wxss的代码
.backbone-tab{
height: 147rpx;
width: 100%;
display: flex;
justify-content: space-evenly;
align-items: center;
border-bottom: 1px solid #eee;
}
.backbone-tab text{
font-size: 25rpx;
border: 2px solid transparent;
}
.backbone-tab .active{
border-bottom: 2px solid #ffc037;
}
.corresponding .item{
display: none;
}
.corresponding .item.active{
display: block;
}
js代码
data: {
tabArr:{
currentId:0,
currentBdid:0
},
oneselfurl:"…/…/assets/tabs/add.png"
},
tab:function(e){
var dataid=e.currentTarget.id
var obj = {}
obj.currentId = dataid
obj.currentBdid = dataid
this.setData({
tabArr : obj
})
},
- 微信小程序顶部用 scroll-view 组件横向滚动,类似tab选项卡的效果,
- 微信小程序滚动Tab选项卡:左右可滑动切换
- 微信小程序的tab选项卡的实现
- 转载【微信小程序】:微信小程序滚动Tab选项卡:左右可滑动切换(仿某宝)
- 微信小程序滚动Tab选项卡:左右可滑动切换
- 微信小程序滚动Tab选项卡:左右可滑动切换
- 微信小程序tab选项卡
- 微信小程序 swiper scroll-view height设置自适应 tab选项卡
- 微信小程序官方横向滚动tab
- 微信小程序:使用swiper与scroll-view实现tab选项卡(2)
- 微信小程序-tab选项卡
- 微信小程序 --- 10行代码实现滑动tab切换
- 微信小程序「官方示例代码」剖析【下】:运行机制
- 解决微信小程序switchTab后tab不刷新(暂时的解决办法)
- 微信小程序支付官方文档
- 微信小程序--官方文档补充【操作反馈】--toast组件
- 微信小程序----导航栏选项卡(MUI顶部选项卡)
- 微信小程序开发 [01] 小程序基本结构和官方IDE简介
- 微信 小程序 官方教程 开发文档 开发工具