更新日期:

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选项卡(组件)的更多相关文章

  1. 微信小程序Tab选项卡切换大集合

    代码地址如下:http://www.demodashi.com/demo/14028.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  2. 微信小程序基于swiper组件的tab切换

    代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  3. 原创:WeZRender:微信小程序Canvas增强组件

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...

  4. 微信小程序之swiper组件高度自适应

    微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...

  5. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  6. 关于微信小程序前端Canvas组件教程

    关于微信小程序前端Canvas组件教程 微信小程序Canvas接口函数 ​ 上述为微信小程序Canvas的内部接口,通过熟练使用Canvas,即可画出较为美观的前端页面.下面是使用微信小程序画图的一些 ...

  7. uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤

    uni-app开发微信小程序引入UI组件库(Vant-weapp)步骤 这里以vant-weapp为例 uni-app官方文档介绍引入组件的方法 1. 新建相关目录 根目录下创建 wxcomponen ...

  8. 微信小程序校历组件

    微信小程序校历组件 校历组件,可以作为校园小程序的插件,如果觉得不错,点个star吧

  9. 微信小程序内置组件web-view的缓存问题探讨

    前言:博客或者论坛上面,还有自习亲身经历,发现微信小程序的webview组件的页面缓存问题相当严重,对开发H5的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...

随机推荐

  1. java多态--算法实现就是多态

    算法:是实现集合接口的对象里的方法执行的一些有用的计算,例如:搜索和排序. 这些算法被称为多态,那是因为相同的方法可以在相似的接口上有着不同的实现. 集合接口 集合框架定义了一些接口.本节提供了每个接 ...

  2. C#编程(五十七)----------位数组

    位数组 如果需要处理很多位,就可以使用BitArray类和BitVector32.BitArray位于命名空间System.Collections中. BitVector32位于命名空间System. ...

  3. C#编程(小结)---------- 小总结

    总结 概括 委托是寻址方法的.NET版本,类似于C++中的指针.委托可以理解为指向函数的指针,它是类型安全的,定义了具体的参数和返回值. 定义一个委托,实际上是定义一个类,委托是对方法的引用,如方法F ...

  4. 【python】python编码方式,chardet编码识别库

    环境: python3.6 需求: 针对于打开一个文件,可以读取到文本的编码方式,根据默认的文件编码方式来获取文件,就不会出现乱码. 针对这种需求,python中有这个方式可以很好的解决: 解决策略: ...

  5. Android中Service类onStartCommand的返回值问题

    Android开发的过程中,每次调用startService(Intent)的时候,都会调用该Service对象的onStartCommand(Intent,int,int)方法,然后在onStart ...

  6. Linux学习7-tomcat部署多个项目(多个端口)

    前言 前面已经在tomcat上搭建了jenkins的环境,如果我们有多个项目需要部署的话,如何在一个tomcat下部署多个项目呢? 前面是直接在:8080/jenkins访问的,如果有其它项目部署的话 ...

  7. 使用开源库 SVPullToRefresh 实现上拉加载下拉刷新

    SVPullToRefresh开源库地址 https://github.com/samvermette/SVPullToRefresh 将整个文件夹SVPullToRefresh拖入工程中并引入头文件 ...

  8. RecyclerView常见问题解决方案,RecyclerView嵌套自动滚动,RecyclerView 高度设置wrap_content 无作用等问题

    1,ScrollView或者RecyclerView1 嵌套RecyclerView2  进入页面自动跳转到recyclerView2上面页面会自动滚动貌似是RecyclerView 自动获得了焦点两 ...

  9. Scrollbar中滚动条的设置

      insideOverlay 默认值,表示在padding区域内并且覆盖在view上 insideInset 表示在padding区域内并且插入在view后面 outsideOverlay 表示在p ...

  10. 在Redhat 7.3中采用离线方式安装Docker

    本文环境 Redhat Linux 7.3.Docker 18. 写在前面 Docker CE默认是不支持Redhat的,如果你想在Redhat安装,可以使用静态二进制包.这是我多次尝试RPM后得出的 ...