微信小程序 - 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的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...
随机推荐
- 选股:“均线是水,K线是舟,量是马达!”的选美理念!
选股:“均线是水,K线是舟,量是马达!”的选美理念! 很多庄家就是故意做数据,让某只股票的数据非常符合“理论”,引诱“技术派”股民
- 将hta包装为exe发布
hta在打开的时候,有时候会被杀毒软件拦截而不给执行,更重要的一点是通常都可以右击查看源代码,里面如果涉及到域名或者其它的一些细节就很容易被其它人了解. 网络上有一些hta转exe的,类似的软件基本上 ...
- linux 调用栈打印
NDK开发的代码打印方式 #include <utils/CallStack.h> extern "C" void dumping_callstack(void);vo ...
- 【转】内存分析工具 MAT 的使用
本文转载自:http://blog.csdn.net/aaa2832/article/details/19419679 1 内存泄漏的排查方法 Dalvik Debug Monitor Server ...
- 低版本系统兼容的ActionBar(六)用Fragment+ViewPager+Tab实现快速导航
Tab经常和Fragment结合使用,这一讲我们用3种方式来实现这种快捷导航. 0.重要的两个监听器 MyTabListener,这个我们之前已经接触过了 package com.kale.actio ...
- .Net Standard Http请求实例
一 ..Net Standard http协议封装 程序集: System.Net.Http.dll 命名 空间:System.Net.Http HttpClient :http请求 发送类 Form ...
- 洛谷 p1352 没有上司的舞会 题解
P1352 没有上司的舞会 题目描述 某大学有N个职员,编号为1~N.他们之间有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.现在有个周年庆宴会,宴会每邀请来一个职员 ...
- [leetcode]Remove Duplicates from Sorted List @ Python
原题地址:https://oj.leetcode.com/problems/remove-duplicates-from-sorted-list/ 题意: Given a sorted linked ...
- html5各种页面切换效果和模态对话框
页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:<a href="index.html" data-transition="pop ...
- Datetimepicker配置参数
jquery的datetimepicker时间控件除了样式有点不太美观,功能性还是相当强大的. 在正常情况下input的type应该设置为"text",可点击又可输入(mask,e ...