本例根据绑定id来实现tab切换,但本例仍有缺陷,用for循环数据,无法实现切换。如有大神能够有更好方法,欢迎留言更正

WXML:

<view class="tab">
<view bindtap="tabs" class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="0" data-id="0">tab-hd01</view>
<view bindtap="tabs" class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="1" data-id="1">tab-hd02</view>
<view bindtap="tabs" class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="2" data-id="2">tab-hd03</view>
<view bindtap="tabs" class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="3" data-id="3">tab-hd04</view>
</view> <view class="tabcon">
<view class="{{tabArr.curBdIndex=='0'? 'active' : ''}}">tab-bd01111</view>
<view class="{{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd02222</view>
<view class="{{tabArr.curBdIndex=='2'? 'active' : ''}}">tab-bd03333</view>
<view class="{{tabArr.curBdIndex=='3'? 'active' : ''}}">tab-bd04444</view>
</view>

WXSS:

.tab{
display: flex;
flex-direction:row;
height: 50px;
line-height: 50px; }
.tab view{
width: 25%;
text-align: center;
}
.tab .active{
display: inline-block;
color: #188eee;
border-bottom: 1px #188eee solid;
}
.tabcon view{
display: none;
}
.tabcon .active{
display: inline-block;
}

JS

Page({
data: {
tabArr: {
curHdIndex: 0,
curBdIndex: 0,
}
},
tabs: function (e) {
var dataId = e.currentTarget.id;
var obj = {};
obj.curHdIndex = dataId;
obj.curBdIndex = dataId; this.setData({
tabArr: obj
});
}
});

  

根据id来实现小程序tab切换,的更多相关文章

  1. 微信小程序tab切换,可滑动切换,导航栏跟随滚动实现

    简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...

  2. 小程序tab切换 点击左右滑动

    wxml <scroll-view scroll-x="true" class="navbar-box"> <block wx:for=&qu ...

  3. 小程序——Tab切换

    <view class="body"> <view class="nav bc_white"> <view class=" ...

  4. 小程序tab切换代码

    <!--index.wxml--> <view class="container"> <view class="navtap" & ...

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

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

  6. 小程序TAB列表切换内容动态变化,scrollview高度根据内容动态获取

    滑动tab选项卡 一.在小程序里面tab选项卡是用的是自带的swiper组件,下面直接上代码 <view class="container"> <view cla ...

  7. 微信小程序tab(swiper)切换

    <- wxml -> <view class="youhui"> <view ' bindtap='toggle'> 未使用 </view ...

  8. 微信小程序-tab标签栏实现教程

    一.摘要 tab栏(标签切换栏)是app中常见的一种交互方式,它可以承载更多的内容,同时又兼顾友好体验的优点.但在小程序中,官方并没有为咱们提供现成的组件.因此我们程序员展现才艺的时候到了(其实市面上 ...

  9. 微信小程序 - tab选项卡(组件)

    更新日期: 2019/3/5:首次发布,默认下标“curIndex”超出红色提示 2019/3/7:增加tabName,可自定义数据标题名称(详情看示例) 支持单个/多个tab(显示/隐藏) 参数: ...

随机推荐

  1. js 变量提升(JavaScript Scoping and Hoisting)

    原文网址:http://www.cnblogs.com/betarabbit/archive/2012/01/28/2330446.html 这是一篇作者翻译过来的文章,未翻译的原文网址在这里:htt ...

  2. amin例子的简单研究

    amin这个例子,使用了比较复杂高阶的qml技巧,但是也有局限性.下面分3个部分,分别是界面部分,算法部分和扩展部分,简单地对这个问题进行理解.        由衷感谢:http://amin-ahm ...

  3. 20145127《java程序设计》第一次实验

    <java程序设计>第一次实验 实验内容及其步骤 1.使用JDK编写简单的Java小程序: Java编译的方法有很多,最基础最简单的就是使用命令行,记事本,Java虚拟机直接进行编译,下面 ...

  4. python面向对象总结!

    面向对象 Object Oriented Programming 基本单元:对象把数据和功能封装在里边,能实现很好的复用性,灵活性和扩展性. 面向对象的两个基本概念:类和对象 面向对象的基本要素:属性 ...

  5. numpy.random.randn()与rand()的区别【转】

    本文转载自:https://blog.csdn.net/u010758410/article/details/71799142 numpy中有一些常用的用来产生随机数的函数,randn()和rand( ...

  6. POJ 1222 EXTENDED LIGHTS OUT(高斯消元)题解

    题意:5*6的格子,你翻一个地方,那么这个地方和上下左右的格子都会翻面,要求把所有为1的格子翻成0,输出一个5*6的矩阵,把要翻的赋值1,不翻的0,每个格子只翻1次 思路:poj 1222 高斯消元详 ...

  7. hdu 6444 网络赛 Neko's loop(单调队列 + 裴蜀定理)题解

    题意:有编号为0~n-1的n个游戏,每个活动都有一个价值(可为负),给你m,s和k,你可以从任意一个编号开始玩,但是下一个游戏必须是编号为(i + k)%n的游戏,你最多能玩m次游戏,问你如果最后你手 ...

  8. HDU 2571(dp)题解

    命运 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Submiss ...

  9. 【域名配置】Tomcat外网发布域名配置

    1.修改端口 首先,访问服务器时默认的是80端口,tomcat中的server.xml文件直接修改,这里要说明的是如果一个服务器上有多个tomcat的话,修改端口需要注意的是要修改 <Serve ...

  10. 51nod 1080 两个数的平方和

    没心情写数学题啦啊   好难啊 #include<bits/stdc++.h> using namespace std; set<int> s; set<int>: ...