小程序单选多选自定义
wxml:
<view class="tixian">
<view wx:for="{{money}}" class="tx_money"
style="{{item.select==true?'color:#fff;background-image: url(/liantui_card/resource/images/txbg.png)':''}}"
wx:key="" bindtap='theme' data-index='{{index}}'><text>{{item.money}}</text>元</view>
</view>
css:
.tixian{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.tixian{
padding: 0rpx 25rpx;
}
.tx_money{
width: 210rpx;
height: 150rpx;
box-shadow: #DFDEE0 0px 0px 10px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15rpx;
background-color: #fff;
margin: 14rpx;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
.tx_money text{
font-size:50rpx;
font-weight: bold;
margin: 0rpx 10rpx;
}
js:
data:{
moneybg:'/liantui_card/resource/images/txbg.png',
money:[
{
money:1,
select:false
},
{
money:5,
select:false
},
{
money:10,
select:false
},
{
money:15,
select:false
},
{
money:20,
select:false
},
{
money:100,
select:false
},
]
},
//点击选择--单选
theme:function(e){
var that = this
var index = e.currentTarget.dataset.index;//选中的下标
var item=that.data.money[index];//选中的值
var money=that.data.money;//数组
for (let m = 0; m < money.length; m++) {
money[m].select=false; //初始全部改为未选中
}
item.select=!item.select;//选中值的选中状态改为选中
that.setData({
money:that.data.money //最后的数组状态渲染
})
console.log(item.money);
},
//点击选择--多选
theme:function(e){
var that = this
var index = e.currentTarget.dataset.index;//选中的下标
var item = that.data.theme[index];//选中的值
item.select = !item.select;//给选中的值附相反值--未选中的改成选中了
that.setData({
theme:that.data.theme//重新渲染
})
var cate=that.data.theme;
var x_theme=that.data.x_theme;
for (let t = 0; t < cate.length; t++) {
if(cate[t].select==true){
x_theme=x_theme+','+cate[t].title //选中的多个值放到一个新的数组中,用,隔开
}
}
console.log(x_theme.substring(1));//除去x_theme的初始第一个空置的,
},