微信小程序自定义组件-Tabs页面样式

1.修改组件Tabs标签结构

 

 2.设置Tabs页面样式

 

 3.页面样式如下

 

 4.为了组件复用,把组件标题内容抽出来,放到js文件中

 

 5.在组件标签页用wx:for遍历数据生成页面

 

 6.生成页面如图

 

 7.根据数据判断添加active类

 

 8.页面样式如图

 

 9.添加标题激活选中效果

 9.1 给标题绑定点击事件

 

 

  9.2 在组件js文件中添加点击事件

 

  

 

 10.至此完成Tabs点击标题进行样式切换

 

 

posted @ 2020-05-14 17:27  IT小师妹  阅读(3451)  评论(0编辑  收藏  举报