258资源分享网

微信小程序 | 多个按钮或VIEW，点击改变状态 简易的实现方法实现效果：背景图片：.wxml文件view plaincopyviewclass="chose-txt"data-price="{{item.price}}"data-id="{{index}}"bindtap="choseTxtColor"style="{{in ...

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

.wxml文件

[html] view plain copy

<view class="chose-txt" data-price="{{item.price}}" data-id="{{index}}" bindtap="choseTxtColor" style="{{index == id?'background:url(../resource/button/on_chose.png) right no-repeat; border:1rpx solid #e8580c; color: #e8580c':'baciground:url();border:1rpx solid gainsboro;color:gray'}}">

<text class="chose-p">{{item.name}}</text>

<text class="chose-p">{{item.price}}元</text>

</view>

</block>

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

.wxss文件

[html] view plain copy

.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页面

[javascript] view plain copy

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

})

},

}