<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tab效果</title>
<style type="text/css">
ul{
list-style: none
}
*{
margin: 0
padding: 0
}
#tab{
border: 1px solid #ccc
margin: 20px auto
width: 403px
border-top: none
}
.list ul{
overflow: hidden
}
.list li{
float: left
}
.list li{
padding-left: 28px
padding-right: 28px
padding-top: 6px
padding-bottom: 6px
border: 1px solid #ccc
background: -moz-linear-gradient(top, #FEFEFE, #EDEDED)
background:-webkit-gradient(linear,left top,left bottom, from(#fefefe), to(#ededed))
border-right: none
cursor: pointer
}
#listCon{
height: 100px
}
#listCon div{
padding:10px
position:absolute
opacity:0
filter:alpha(opacity=0)
}
.list li:first-child{
border-left: none
}
.list li:hover{
background: #fff
border-bottom: none
}
.list li.cur{
background: #fff
border-bottom: none
}
#listCon div.cur{
opacity:1
filter:alpha(opacity=100)
}
</style>
</head>
<body>
<div id="tab">
<div>
<ul>
<li>许嵩</li>
<li>周杰伦</li>
<li>林俊杰</li>
<li>陈奕迅</li>
</ul>
</div>
<div id="listCon">
<div>断桥残雪、千百度、幻听、想象之中</div>
<div>红尘客栈、牛仔很忙、给我一首歌的时间、听妈妈的话</div>
<div>被风吹过的夏天、江南、一千年以后</div>
<div>十年、K歌之王、浮夸</div>
</div>
</div>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("tab")
var lis = oDiv.getElementsByTagName("li")
var oDivCon = document.getElementById("listCon")
var lisDiv = oDivCon.getElementsByTagName("div")
for(var i=0i<lis.lengthi++){
lis[i].index = i
lis[i].onmouseover = function(){
show(this.index)
}
}
function show(a){
for(var j=0j<lis.lengthj++){
lis[j].className = ""
lisDiv[j].className = ""
}
lis[a].className = "cur"
lisDiv[a].className = "cur"
}
}
</script>
</body>
</html>
微信小程序使用的是类似MVVM类型的框架，本质是数据驱动视图，换句话来说就是逻辑层（javascript）去驱动界面层（view）的改变，功能实现核心主要在于操作数据。 下面来详细讲解，微信小程序如何实现tab切换功能，如下图所示： 在wxml文件里面，搭建结构。其中，tab盒子是tab整体，btns里面的view是切换按钮，cons里面的view是切换的盒子内容。 把切换按钮btns和内容cons渲染出来。在js文件里面书写数据，并且在wxml文件里面通过wx:for进行列表渲染输出。 通过弹性布局去书写样式。添加cur当前类名去控制当前按钮的样式和当前显示的内容盒子。 注意微信小程序使用的是rpx可以自适应的单位，规定所有屏幕宽度为750rpx，在iPhone6设备屏幕宽度换算是2rpx=1px。 逻辑层添加了active数据控制当前显示盒子。 wxml要书写判断验证去控制盒子是否有cur类名。 上面表达式表示，如果当前项的索引值index等于数据active，则此项有cur这个类名，否则就没有。注意cur类名是控制当前按钮样式和当前显示内容盒子的。 有cur这个类名的按钮会显示当前的样式，有cur这个类名的内容盒子是显示的，但是否有这个类名是通过active这个数据决定的。所以最后我们只需要把active这个数据的值修改成用户点击按钮的索引值即可实现tab切换功能。 首先要给按钮btn自定义索引值等于循环当前项的index，微信小程序给组件自定义索引值是通过在组件身上添加data-index=”{{index}}”属性，然后在js里面即可通过事件对象里面的e.currentTarget.dataset.index属性获取用户点击按钮的索引值。 给按钮自定义索引值和绑定事件，绑定点击事件通过给按钮组件添加属性bindtap=“函数名”，此处设置函数名为toggle。 把active的值设置为用户点击按钮的索引值，即可实现tab切换功能。 e.currentTarget.dataset.index获取用户点击按钮的索引值，微信小程序通过this.setData()去修改data里面的数据内容。
