小程序怎么获取标签（小程序实现五颜六色的标签-技术文）

小程序怎么获取标签（小程序实现五颜六色的标签-技术文）

五颜六色的标签

处女座的男孩子，总是喜欢花里胡哨的东西。所以搞了一个这个。虽然是开源的。但是还是希望你尊重我的劳动成果。有兴趣的朋友可以把这个打包成组件。或者是模块。

效果图

效果展示

WXML代码

<view class='lee_list_tags'> <view style='margin:5rpx; ' wx:for='{{50}}'> 标签{{index}} </view> </view> WXSS代码

.lee_list_tags { margin: 12px; vertical-align: top; text-align: left; } .lee_list_tags view { display: inline-block; vertical-align: middle; padding: 3px 10px; border: solid 1px #E7E7E7; border-radius: 32px; background-color: #FFF; margin-bottom: 15px; } .lee_list_tags view:nth-child(1n 0) { background-color: #EFF9FF; border-color: #BDD4E5; color: #4C79A6; } .lee_list_tags view:nth-child(1n 0) { background-color: #F4FDE9; border-color: #B0CDAC; color: #55964A; } .lee_list_tags view:nth-child(2n 0) { background-color: #FFFAEC; border-color: #F7AC93; color: #CA663C; } .lee_list_tags view:nth-child(3n 0) { background-color: #FAF0FB; border-color: #F0B9D9; color: #C46AAB; } .lee_list_tags view:nth-child(4n 0) { background-color: #F2EFEC; border-color: #D6CCC0; color: #AA9881; } .lee_list_tags view:nth-child(5n 0) { background-color: #FDEAF2; border-color: #F39CC2; color: #EB5696; } .lee_list_tags view:nth-child(6n 0) { background-color: #FAEDD6; border-color: #E9B858; color: #8E6313; } End：

技术本身没啥难度，主要是一个nth-child的应用，如果对你有帮助，请给点赞转发评论。