草庐IT

微信小程序之自定义表单组件(radio)

北边一颗小星星 2023-10-01 原文

背景：

最近在做项目的时候遇到一个问题，那就是微信的官方表单组件的可扩展性不强，无法达到设计稿所要求的效果，所以想到了用自定义组件的方法自定义一个表单组件。

（自定义组件其实往往用在需要复用的地方，比如每个页面都有一样的头部和底部，那么我们就可以把它们封装到自定义组件中，这样就不用每个页面都复制粘贴一样的一堆代码了）

开始：

下面以自定义radio组件为例：

官方radio的样式只能修改color(当然要修改其他样式也是有办法的，不过较为麻烦，这里先不提)，扩展性不强。

而我想要达到类似于button样式的效果↓

那么就需要自定义一个radio出来了。

第一步：

首先在该目录下新建一个components 文件夹(当然文件夹命名也可以取其他，不过命名为components方便辨认)

再在components里新建一个文件夹用于放自己的自定义组件，这里我统一命名为myradio

鼠标移到myradio处右键选择"新建 Component"，接着自动生成如下四个文件

第二步：

分别在myradio.wxml、myradio.wxss和myradio.js中写入以下代码↓

myradio.wxml：

//class里是选中与未选中的样式，point是鼠标的点击事件名，data-index是在point这个鼠标点击事件的返回值data中传入名为index的值
<view class="radio">
    <view class="{{currentIndex==1?'item_active':'item'}}" bindtap="point" data-index="1">男</view>
    <view class="{{currentIndex==0?'item_active':'item'}}" bindtap="point" data-index="0">女</view>
</view>

 myradio.wxss：

注意自定义组件中的wxss的选择器最好写类选择器，否则会警告、甚至出现意料之外的副作用。

//盒子使用弹性布局（给父盒子添加display:flex）
.radio{
   width: 580rpx;
   height: 80rpx;
   display: flex;
   justify-content: center;
}
.item{
    width: 200rpx;
    height: 80rpx;
    border-radius: 20rpx;
    margin: 0 30rpx;
    background-color:lightgrey;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.item_active{
    width: 200rpx;
    height: 80rpx;
    border-radius: 20rpx;
    margin: 0 30rpx;
    background-color:#503E9D;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

myradio.js：

Component({
    // 使自定义组件有类似于表单控件的行为
    behaviors: ['wx://form-field'],
    /**
     * 组件的属性列表
     */
    properties: {
        value:{//这里的属性名之所以取名value是因为表单控件有name和value属性
            type:String,
            value:"1"
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        currentIndex:1
    },

    /**
     * 组件的方法列表
     */
    methods: {
        point(e){
            const {index}=e.currentTarget.dataset;
            if(index==1){
                this.setData({//properties和data里的值都可用setData设置
                    value:"1",//1表示男
                    currentIndex:1
                })
            }
            else{
                this.setData({
                    value:"2",//2表示女
                    currentIndex:0
                })
            }
        }
    }
})

第三步：

在要引入该自定义组件的页面的json文件中写上↓

{
    "usingComponents": {
        "myradio":"/components/myradio/myradio"//这里我把该组件的标签也命名为myradio
    }
}

 然后在要引入的页面的wxml文件中用myradio标签引入即可，比如↓

<view>//这里包裹该自定义组件的大盒子样式未给出，可以根据自身需求写样式
   <text>性别</text>
   <myradio name="gender" value="1"></myradio>//myradio标签
</view>

最终效果举例：（这样就做好啦！）

自定radioxffmyradio前端微信小程序javascript

有关微信小程序之自定义表单组件(radio)的更多相关文章

  1. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  2. ruby-on-rails - Rails 编辑表单不显示嵌套项 - 2

    我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib

  3. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  4. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  5. ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2

    我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby​​1.9+ 关于ruby-主要:Objectwhenrun

  6. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  7. ruby - 在 Ruby 中有条件地定义函数 - 2

    我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin

  8. ruby - 定义方法参数的条件 - 2

    我有一个只接受一个参数的方法:defmy_method(number)end如果使用number调用方法，我该如何引发错误？？通常，我如何定义方法参数的条件？比如我想在调用的时候报错:my_method(1) 最佳答案 您可以添加guard在函数的开头，如果参数无效则引发异常。例如:defmy_method(number)failArgumentError,"Inputshouldbegreaterthanorequalto2"ifnumbereputse.messageend#=>Inputshouldbegreaterthano

  9. ruby - 如何在 Grape 中定义哈希数组？ - 2

    我使用Ember作为我的前端和GrapeAPI来为我的API提供服务。前端发送类似:{"service"=>{"name"=>"Name","duration"=>"30","user"=>nil,"organization"=>"org","category"=>nil,"description"=>"description","disabled"=>true,"color"=>nil,"availabilities"=>[{"day"=>"Saturday","enabled"=>false,"timeSlots"=>[{"startAt"=>"09:00AM","endAt"=>

  10. ruby - 获取模块中定义的所有常量的值 - 2

    我想获取模块中定义的所有常量的值:moduleLettersA='apple'.freezeB='boy'.freezeendconstants给了我常量的名字:Letters.constants(false)#=>[:A,:B]如何获取它们的值的数组，即["apple","boy"]？ 最佳答案 为了做到这一点，请使用mapLetters.constants(false).map&Letters.method(:const_get)这将返回["a","b"]第二种方式:Letters.constants(false).map{|c

随机推荐