微信小程序 | 多个按钮或VIEW，点击改变状态 简易的实现方法

实现效果：

背景图片：

.wxml文件

                {{item.name}}
                 {{item.price}}元
            
            

样式都在这个文件中写了，CSS只是控制布局

.wxss文件

.chose-txt{
  border-radius: 6px;  font-size: 26rpx;   height: 40px;  width:  27.5%;  margin: 5px; float: left;padding-top: 5px;
}
.chose-p{
  line-height: 18px; width: 100%; height:20px; text-align:  center; float: left;
}

.js页面

var id ; 
page{
    array: [{ name: '单拍', price: '198'}, { name: '亲子套餐', price: '398' },   { name: '活动套餐', price: '598' },  { name: '女王套餐', price: '1198' } ],
    id:0,             //进入页面时，默认选择第0个，如果不需要默认选中，注释掉就可以了
},
choseTxtColor:function(e){
    var id = e.currentTarget.dataset.id;  //获取自定义的ID值
    this.setData({
      id:id 
    })
  },
}
}

好了，到这里已经设置完成了，亲测可用