更新日期:

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. AndroidStudio工具将Module项目导出成Jar和arr库

    原文:http://blog.csdn.net/liulei823581722/article/details/52919697 该篇首先讲述利用AndroidStudio如何把一个module项目导 ...

  2. 【Devops】【docker】【CI/CD】Jenkins源码管理,设置gitlab上项目的clone地址 + jenkins构建报错:Please make sure you have the correct access rights and the repository exists.

    注意,如果 jenkins构建报错:Please make sure you have the correct access rights and the repository exists. 而此时 ...

  3. WordPress主题开发实例:显示最新发表文章

    实现效果 制作网站的时候,想在页面左栏显示最新发表的文章,如: 一.先开启侧边栏工具,在functions.php加上 $args = array( 'name' => __( '分类侧边栏') ...

  4. JAVA card 应用开发(二) 在项目添加APPLET

    在上篇博文中.<JAVA card 应用开发创建第一个APPLET>.介绍了一个项目从无到有. 那么.我们建立了这个项目后,仅仅有一个应用(一个可选AID),假设我希望这个项目能够有多个应 ...

  5. 利用Palette库来取得图片中的主要色彩

    其实就我对开源库的了解,有很多开源库都能实现自动计算出任意一张图片中的主要色彩的功能,这种看似神奇实则枯燥的技术很容易适用到手机的UI中.根据不同的背景定制不同的UI,这个在最新的Android Ma ...

  6. Android日志监听工具logcat命令详解(转)

    Android日志系统提供了记录和查看系统调试信息的功能.日志都是从各种软件和一些系统的缓冲区中记录下来的,缓冲区可以通过logcat命令来查看和使用. 在使用logcat之前,请确保手机的USB调试 ...

  7. 【LINK】手机Web开发框架

    LINK : http://www.oschina.net/project/tag/322/mobile-web AmazeUI : http://amazeui.org/

  8. 使用idea 在springboot添加本地jar包的方法

    原文地址;https://blog.csdn.net/huxiaodong1994/article/details/80702278 1.首先在与src同级的目录下新建一个lib目录,然后将本地jar ...

  9. WHY数学图形显示工具

    软件功能:输入一个二元数学表达式,含有两个参数变量X和Y,显示该数学表达式的三维图形. 很久之前就有写这个软件的想法,却一直没有激情和动力,终于在年假这两天完成了.以此软件纪念我那十几年前的高中生活, ...

  10. 【数字图像处理】使用kmeans算法对TrueColor图片进行优化

    实验的主要内容是将truecolor的图片通过一个优化算法得到其256色的最优表示.本实验采用kmean做算法对像素的色彩进行聚类的计算,分类得到一个色彩数为256的CodeBook,和一个包含有Co ...