小程序样式自定义单选多选

小程序单选多选自定义
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的初始第一个空置的,
    },
    


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值