微信小程序的多选改变样式_微信小程序button选中改样式-实现单选/多选

小程序实现多button单选/多选

红色为选中状态

单选

多选

①wxss

/* pages/button-select/button-select.wxss */

.button_container{

display: flex;

flex-direction: row;

justify-content: space-around

}

/* 按钮未选中 */

.normal_button{

background: greenyellow

}

/* 按钮选中 */

.checked_button{

background: red;

color: white

}

②wxm

样式选中改变是通过三元运算符实现的

{ {item.name}}

{ {msg}}

③js

在Page({...})中填充按钮数据

data: {

buttons: [{ id: 1, name: '银色' }, { id: 2, name: '白色' }, { id: 3, name: '黑色' }],

msg:'',

},

默认使第一个按钮被选中Page({...})

onLoad: function (options) {