微信小程序 - 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的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...
随机推荐
- iOS 创建单例的两种方法
创建一个单例很多办法.我先列举一个苹果官方文档中的写法. [cpp] view plaincopy static AccountManager *DefaultManager = nil; + (Ac ...
- JavaScript:动态代理之远程代理
背景 2008 第一次使用 AJAX 的时候好像使用的是 AJAX.NET,该组件支持为服务器 C# 类型提供 JS 代理,当时不是十分的明白.设计模式中有代理模式,不过真正需要我们手工写代理的次数却 ...
- python测试开发django-28.发送邮件send_mail
前言 django发邮件的功能很简单,只需简单的配置即可,发邮件的代码里面已经封装好了,调用send_mail()函数就可以了 实现多个邮件发送可以用send_mass_mail()函数 send_m ...
- dip和px的相互转化
/** * 根据手机的分辨率从 dp 的单位 转成为 px(像素) */ public static int dip2px(Context context, float dpValue) { fina ...
- 《ASP.NET Web API 2框架揭秘》
<ASP.NET Web API 2框架揭秘> 基本信息 作者: 蒋金楠 出版社:电子工业出版社 ISBN:9787121235368 上架时间:2014-7-5 出版日期:2014 年7 ...
- protobuf中的编码规则
protobuf中的编码规则 (1)序列化和反序列化: 在开始本部分的内容之前,首先有必要介绍两个基本概念,一个是序列化,一个是反序列化.这两个概念的定义在网上搜一下都很多的,但大多都讲得比较晦涩,不 ...
- python读取yaml配置文件
支持多种语言:python.js.golang.java.c.c++ YAML 语言(发音 /ˈjæməl/ )的设计目标,就是方便人类读写.它实质上是一种通用的数据串行化格式. 它的基本语法规则如下 ...
- win10 下 protobuf 与 qt
编译环境: win10 x64 编译器 :mingw32 cmake 使用场景:Qt4.8.7 下载 protobuf 最新的代码:https://github.com/google/proto ...
- iOS开发-消息通知机制(NSNotification和NSNotificationCenter)
iOS中委托模式和消息机制基本上开发中用到的比较多,一般最开始页面传值通过委托实现的比较多,类之间的传值用到的比较多,不过委托相对来说只能是一对一,比如说页面A跳转到页面B,页面的B的值改变要映射到页 ...
- RxJava RxBinding RxView 控件事件 MD
Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...