微信小程序 - tab选项卡(组件)
更新日期:
2019/3/5:首次发布,默认下标“curIndex”超出红色提示
2019/3/7:增加tabName,可自定义数据标题名称(详情看示例)

支持单个/多个tab(显示/隐藏)
参数:
1. tabTitle(tab标题)
2. curIndex(默认下标)
3. bindtabChange(传回下标接收的函数) - this.triggerEvent
4. tabName (自定义数据名称)- 2019/3/7
<tab-switch tabTitle="{{categories}}" curIndex="0" bindtabChange="tabChangeIndex">
<view hidden="{{idx!=0}}">
00000
</view>
<view hidden="{{idx!=1}}">
111111
</view>
<view hidden="{{idx!=2}}">
222222
</view>
<view hidden="{{idx!=3}}">
333333
</view>
<view hidden="{{idx!=4}}">
444444
</view>
<view hidden="{{idx!=5}}">
555555
</view>
<!-- for循环模式 -->
<view wx:for="{{categories}}" wx:for-index="idxs" wx:key="item.id">
<view hidden='{{idx!=idxs}}'>
{{idxs}}*-{{item.title}}*-{{item.id}}
</view>
</view>
</tab-switch>
点击下载:tab切换卡组件示例
微信小程序 - tab选项卡(组件)的更多相关文章
- 微信小程序Tab选项卡切换大集合
代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 微信小程序基于swiper组件的tab切换
代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 原创:WeZRender:微信小程序Canvas增强组件
WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...
- 微信小程序之swiper组件高度自适应
微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...
- 微信小程序中的组件使用1
不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...
- 关于微信小程序前端Canvas组件教程
关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...
- uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤
uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...
- 微信小程序校历组件
微信小程序校历组件 校历组件,可以作为校园小程序的插件,如果觉得不错,点个star吧
- 微信小程序内置组件web-view的缓存问题探讨
前言:博客或者论坛上面,还有自习亲身经历,发现微信小程序的webview组件的页面缓存问题相当严重,对开发H5的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...
随机推荐
- 电脑不能使用ArcMap 提示由于系统时间不对造成的怎么办?转
来自:http://www.jb51.net/diannaojichu/334554.html 电脑不能使用ArcMap,在打开ARCMAP时,出现"The system clock has ...
- sk_buff的数据预留和对齐
转自:http://blog.csdn.net/keepmovingnow/article/details/45850387 数据预留和对齐主要由skb_reserve().skb_put().skb ...
- SharePoint Online 创建文档库
前言 本文介绍如何在Office 365中创建文档库,以及文档库的一些基本设置. 正文 通过登录地址登录到Office 365的SharePoint Online站点中,我们可以在右上角的设置菜单中, ...
- go 用的不多的命令
8.go doc 文档注释相关,可以搭建本地GO文档服务器,包含自己的项目注释,更多细节请参考:https://github.com/hyper-carrot/go_command_tutorial/ ...
- Eclipse with ADT的安装和使用
我们从安卓官方网站下载下来的eclipse是捆绑好了ADT的,所以不用自己安装插件. 我现在在这个目录下简历一个空的文件夹--virtual,用来来存放虚拟机. 然后,在我的电脑上右键->属性, ...
- C# 异步编程Task整理(一)
一.简介 .Net Framework 4.0新增了一个System.Threading.Tasks命名空间,它包含的类提供了任务的相关操作.使用任务不仅可以获得一个抽象层,还能对底层线程进行很多统一 ...
- CentOS 7 在vmware中的网络设置
一环境说明 二centos在vmware中的安装 三NAT网络设置 四设置固定IP 1修改网卡配置说明 2修改etcresolvconf 实现域名解析 五设置防火墙iptables 1 centos安 ...
- LCA算法总结
LCA问题(Least Common Ancestors,最近公共祖先问题),是指给定一棵有根树T,给出若干个查询LCA(u, v)(通常查询数量较大),每次求树T中两个顶点u和v的最近公共祖先,即找 ...
- [转]分析MySQL数据类型的长度【mysql数据字段 中length和decimals的作用!熟悉mysql必看】
转载自:http://blog.csdn.net/daydreamingboy/article/details/6310907 分析MySQL数据类型的长度 MySQL有几种数据类型可以限制类型的&q ...
- Dalvik虚拟机的内存管理
Dalvik虚拟机的内存分为三种类型: Java Object Heap, Bitmap Memory, Native Heap. 下面,就这三种类型进行详细讲解: 一. J ...