How to customize a single selector style in WeChat Mini Programs

Today, the editor will share with you the relevant knowledge points about how to customize a single selector style in WeChat Mini Programs. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article, let's take a look at it.

Wxml:

{{item.value}}

Wcss:

.list _ item {display: flex; justify-content: space-between; align-items: center; margin:0 25rpx; width:700rpx; font-size: 30rpx; color: rgb (79 last 79); padding: 28rpx 0; border-bottom:1px solid rgb (209209209);} .item {width: 28rpx; height: 28rpx; border: 2px solid rgb (144144144); border-radius: 100%; display: flex; align-items: center; justify-content: center;}

Js:

Page ({data: {radioValues: [{'value':' unpaid orders', 'selected': false}, {' value': 'orders in progress', 'selected': false}, {' value': 'completed orders', 'selected': false}, {' value': 'all orders', 'selected': true},]}, onLoad: function (options) {} RadioChange:function (e) {var index = e.currentTarget.dataset.index Var arr = this.data.radioValues; for (var v in arr) {if (v = = index) {arr [v] .selected = true;} else {arr [v] .selected = false;}} this.setData ({radioValues:arr})}) these are all the contents of the article "how to customize a single selector style in WeChat Mini Programs". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.