微信小程序——tab导航栏
2024-10-21 04:01:57
wxml:
<
view
class
=
"tab"
>
<
view
class
=
"tab-left"
bindtap
=
"tabFun"
>
<
view
class
=
"{{tabArr.curHdIndex=='0'? 'active' : ''}}"
id
=
"tab-hd01"
data-id
=
"0"
>tab-hd01</
view
>
<
view
class
=
"{{tabArr.curHdIndex=='1'? 'active' : ''}}"
id
=
"tab-hd02"
data-id
=
"1"
>tab-hd01</
view
>
<
view
class
=
"{{tabArr.curHdIndex=='2'? 'active' : ''}}"
id
=
"tab-hd03"
data-id
=
"2"
>tab-hd01</
view
>
<
view
class
=
"{{tabArr.curHdIndex=='3'? 'active' : ''}}"
id
=
"tab-hd04"
data-id
=
"3"
>tab-hd01</
view
>
</
view
>
<
view
class
=
"tab-right"
>
<
view
class
=
"right-item {{tabArr.curBdIndex=='0'? 'active' : ''}}"
>tab-bd01</
view
>
<
view
class
=
"right-item {{tabArr.curBdIndex=='1'? 'active' : ''}}"
>tab-bd02</
view
>
<
view
class
=
"right-item {{tabArr.curBdIndex=='2'? 'active' : ''}}"
>tab-bd03</
view
>
<
view
class
=
"right-item {{tabArr.curBdIndex=='3'? 'active' : ''}}"
>tab-bd04</
view
>
</
view
>
</
view
>
js:
Page( {
data: {
tabArr: {
curHdIndex: 0,
curBdIndex: 0
},
},
tabFun:
function
(e){
//获取触发事件组件的dataset属性
var
_datasetId=e.target.dataset.id;
console.log(
"----"
+_datasetId+
"----"
);
var
_obj={};
_obj.curHdIndex=_datasetId;
_obj.curBdIndex=_datasetId;
this
.setData({
tabArr: _obj
});
},
onLoad:
function
( options ) {
alert(
"------"
);
}
});
wxss:
.tab{
display: flex;
flex-direction: row;
}
.tab-left{
width: 200rpx;
line-height: 160%;
border-right: solid 1px gray;
}
.tab-left view{
border-bottom: solid 1px red;
}
.tab-left .active{
color:
#f00;
}
.tab-right{
line-height: 160%;
}
.tab-right .right-item{
padding-left: 15rpx;
display: none;
}
.tab-right .right-item.active{
display: block;
}
原文:http://www.jb51.net/article/96095.htm
最新文章
- 国内版Office 365和Azure AAD绑定的问题及解决方案
- iOS开发之使用XMPPFramework实现即时通信(三)
- css学习笔记 8
- SDK截图(三):压缩位图之理论准备篇
- String 与 StringBuffer的区别
- explain mysql的type字段,索引的类型
- Swift 设计指南之 编程规范
- DataSet.Clear Method ()
- windows server 2003 64x 读取office数据终极解决办法 The &#39;Microsoft.Jet.OLEDB.4.0&#39; provider is not registered
- android实现对导航Tab设置下划线选中效果
- 求最大值最小值的方法 时间复杂度O(n)
- #, about:blank,javascript:路径比较
- QT5.4 vs2013静态加载插件的sqlite静态编译
- EF架构~FluentValidation实体检验与实体分离了
- Smokeping安装部署
- Redis自学笔记:2.准备
- Vue 重点 必须要记住的
- 03--css形状--css揭秘
- 常用笔记:MySQL
- zookeeper 食谱