重构微信小程序单选(Radio)、多选(checkbox)组件

news/2024/7/20 3:31:11 标签: 小程序, 组件, 重置checkbox, 重置radio

需求说明:组件实现单选、多选功能,在form中点击提交可以拿到值

贴上代码:

wxml:

<view class="component {{theme}}">
    <view class="radio_item {{item.disabled?'cur':''}}" wx:for="{{range}}" wx:key  bind:tap="tapChose" data-num="{{index}}">
        <block wx:if="{{mode=='radio'}}">
            <view name="radio" class="radio {{num==index?'cur':''}}"> 
                <image wx:if="{{num==index}}" mode="aspectFit" src="/assets/imgs/icon/success.png"></image>
            </view>
        </block>
        <block wx:if="{{mode=='checkbox'}}">
            <view name="radio" class="radio {{item.chosed?'cur':''}}">   
                <image wx:if="{{item.chosed}}" mode="aspectFit" src="/assets/imgs/icon/success.png"></image>
            </view>
        </block>        
        <text class="label">{{item.text}}</text>
    </view>
</view>
wxss:(tip:开发的时候用的是scss)
.radio_item{
    display: flex;
    margin-bottom:20rpx;
}
.radio_item.cur{
    .radio{
        background-color: #f5f5f5;
    }    
}
.radio{
    display: flex;
    justify-content: center;
    align-items: center;    
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    margin-right: 10rpx;
    border: 2rpx solid #e6e6e6;
    image{
        display: block;
        width: 60%;
        height: 60%;
    }
}
.radio.cur{
    border: 2rpx solid #09BB07;
    background-color: #09BB07;
}

比较重要的js:


Component({
    behaviors: ['wx://form-field'],
    properties: {
        name:{
            type:String,
        },
        mode:{
            type:String,
            value:'radio',           
        },
        value:{
            type:Array,
            value:[],           
        },
        theme:{
            type:String,
            value:'default',
        },
        range:{//disabled:true不可选中;chosed:true,已选中
            type: Array,
            value:[{code:'aaa',text:'第一排',disabled:false,chosed:true}]
        },
    },
    data: {        
        num:null,
    },
    methods: {        
        tapChose:function(evt){
            let _num = evt.currentTarget.dataset.num;
            if (this.data.range[_num].disabled) {
                return ;
            }  
            if (this.data.mode=='radio') {                
                this.setData({
                    num:_num,
                    value:[this.data.range[_num].code],
                });                
            }else if(this.data.mode=='checkbox'){
                let _range = this.data.range;   
                let _value =[];             
                _range[_num].chosed=!_range[_num].chosed;
                _range.forEach((v,i) => {
                    if (v.chosed) {
                        _value.push(v.code)
                    }
                });
                this.setData({
                    range:_range,
                    value:_value
                });

            }        
            let data=this.data.value;    
           this.triggerEvent('Change',data) 
        },
        
    }    
})

json:

{
  "component": true,
  "usingComponents": {}
}
如何引入页面我就不写了,有问题请提问

说明:通过传入对应的数据,实现单选框、多选框的组件化应用,因为微信自带的样式比较难调节,就自己做了一个在项目中使用

在表单<form>中直接引用该组件,可以拿到数组类型的值


http://www.niftyadmin.cn/n/861090.html

相关文章

Androidstudio无法下载报错unknow hostakamai.bintray.com.you may need to adjust the proxy settings in grad

解决方法&#xff1a; buildscript {repositories {maven{ url http://maven.aliyun.com/nexus/content/groups/public/}} }allprojects {repositories {maven{ url http://maven.aliyun.com/nexus/content/groups/public/}} }

小程序组件开发-商品数量加减box

商品列表和商品详情常常用到数量的加减&#xff0c;比如这个样子&#xff1a; 传入一个最大值和最小值&#xff0c;在这个范围可以自由加减&#xff0c; 上代码&#xff1a;wxml: <view class"count_box"><view class"count_group"><view c…

javascript 对象深浅拷贝的解决方案

问题背景&#xff0c;小程序开发&#xff0c;后台传过来大量的json数据&#xff0c;对传输过来的值进行处理渲染页面&#xff0c;返现修改会导致源数据发生改变&#xff0c; 处理思路&#xff1a;将请求的数据进行拷贝一份&#xff0c;页面渲染等实用拷贝后的数据&#xff0c;在…

Android中ScrollView子空间设置“match_parent”失效的问题。

在ScrollView的xml布局中设置属性&#xff1a;android:fillViewport"true"

微信小程序template模板传值、传方法

小程序入手初期&#xff0c;没有接触组件开发的时候&#xff0c;一般先上手的都是模板开发&#xff0c;也就是小程序文档中的template部分&#xff0c; 它可以让我们模板中定义代码片段&#xff0c;然后在不同的地方调用。 template比较麻烦的就是在调用的时候要分别导入wxml…

Android目录结构

1.src -->Java源代码的 负责程序的逻辑部分!! 2.gen -->自动生成R文件!! 所有的资源文件都会在R.java文件中以final sttic内部类的形式被注册&#xff0c;所以可以通过R.id R.layout 等形式访问资源。 3.assets --> 可以放资源文件,但是不会在R中生…

dp 、dip、 dpi、px、 sp、 pt

px pixels 像素 1080*1920 720*1280 1英寸: 1 2.54cmdpi: 像素密度 一英寸内所含的像素点dp dip: 独立像素 当dpi为160 1dp 1px 当dpi为320 1dp 2px; sp: scaled pixels(放大像素) 主要用于字体显示 根据 google 的建议&#xff0c;TextView 的字号最好使用 sp 做单…

电商小程序价格数字处理函数汇总

价格格式化&#xff0c;数字统一转化&#xff0c;10>10.00 function getPrice(num) {let _numnum;_num parseFloat(num).toFixed(2);let _integer _num.split(.)[0];let _decimal _num.split(.)[1];_integer parseFloat(_integer).toLocaleString();_num (_integer .…