背景：
最近在做项目的时候遇到一个问题，那就是微信的官方表单组件的可扩展性不强，无法达到设计稿所要求的效果，所以想到了用自定义组件的方法自定义一个表单组件。
（自定义组件其实往往用在需要复用的地方，比如每个页面都有一样的头部和底部，那么我们就可以把它们封装到自定义组件中，这样就不用每个页面都复制粘贴一样的一堆代码了）
开始：
下面以自定义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>最终效果举例：（这样就做好啦！）文章来源：https://www.toymoban.com/news/detail-485816.html
文章来源地址https://www.toymoban.com/news/detail-485816.html
到了这里，关于微信小程序之自定义表单组件(radio)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
