近日,微信的应用数量正在如火如荼,热的和完整的,但它也可以
发现,
搜索关键词出来,和各种各样的
网站出现在微信的官方
文档的解释。正好赶上这股热潮,我们先看这几天的小
程序,技术
文件,直接手写的
情况。许多
组件已经被包装进WeChat,才发现没有tab
选项卡效果,和这两天正在研究。以下思路如下:
1。首先,当您单击导航时,需要两个变量,一个存储当前的单击样式类,另一个是导航的
默认样式。
2,
选项卡列表还需要两个变量,一个存储当前
显示块,另一个变量是其他隐藏的默认块。
3,使用三次
操作,通过点击获取导航索引,并决定是否根据索引添加当前类。{此处}我将单击父导航栏中的事件绑定,并通过单击
目标对象获取触发的事件对象
属性。
请结合以下效果图:
接下来,直接看源代码:
Demo.wxml:
tab-hd01
tab-hd01
tab-hd01
tab-hd01
tab-bd01
Tab-bd02
tab-bd03
tab-bd04
Demo.js:
页({
数据:{
TabArr:{
curhdindex:0,
curbdindex:0
},
},
TabFun:
功能(e){
获取数据集属性触发器事件组件
无功_datasetid = e.target.dataset.id;
console.log(,+ _datasetid +---);
无功_obj = { };
_obj curhdindex = _datasetid;
_obj curbdindex = _datasetid;
this.setdata({
TabArr:_obj
});
},
onLoad:功能(选项){
警报();
}
});
Demo.wxss:
{。
显示:flex;
弯曲方向:行;
}
制表符左{
宽度:200rpx;
线高度:160%;
边境:solid 1px的灰色;
}
标签左视图{
底部边框:solid 1px的红色;
}
左键,活动{
颜色:# F00;
}
右键{
线高度:160%;
}
右键,右项{
左:15rpx填充;
显示:无;
}
右键,右项,活动{
显示块;
}
最后演示的结果如下:
谢谢你的阅读。我希望你能帮助你,谢谢你对这个站的
支持。