打造微信小程序的'tabLayout'

因为接下来要做小程序项目,然后想到经常要用的分类切换的需求,为了以后方便,先简单封装一个,先来看下成果


头部



打造微信小程序的'tabLayout'_第1张图片
gif

话不多说.首先是组件wxml和wxss上图


打造微信小程序的'tabLayout'_第2张图片


打造微信小程序的'tabLayout'_第3张图片

然后是js代码了


打造微信小程序的'tabLayout'_第4张图片
属性


打造微信小程序的'tabLayout'_第5张图片
数据


打造微信小程序的'tabLayout'_第6张图片


打造微信小程序的'tabLayout'_第7张图片

到此....组件自定义完成,下面就是使用了


打造微信小程序的'tabLayout'_第8张图片
布局


打造微信小程序的'tabLayout'_第9张图片
使用

好了,自定义tablayout到此结束,以后要用直接拷贝一波,cv大法美滋滋!!!

你可能感兴趣的:(打造微信小程序的'tabLayout')