背景：

最近在做項(xiàng)目的時(shí)候遇到一個(gè)問題，那就是微信的官方表單組件的可擴(kuò)展性不強(qiáng)，無法達(dá)到設(shè)計(jì)稿所要求的效果，所以想到了用自定義組件的方法自定義一個(gè)表單組件。

（自定義組件其實(shí)往往用在需要復(fù)用的地方，比如每個(gè)頁面都有一樣的頭部和底部，那么我們就可以把它們封裝到自定義組件中，這樣就不用每個(gè)頁面都復(fù)制粘貼一樣的一堆代碼了）

開始：

下面以自定義radio組件為例：

官方radio的樣式只能修改color(當(dāng)然要修改其他樣式也是有辦法的，不過較為麻煩，這里先不提)，擴(kuò)展性不強(qiáng)。

而我想要達(dá)到類似于button樣式的效果↓

那么就需要自定義一個(gè)radio出來了。

第一步：

首先在該目錄下新建一個(gè)components 文件夾(當(dāng)然文件夾命名也可以取其他，不過命名為components方便辨認(rèn))

再在components里新建一個(gè)文件夾用于放自己的自定義組件，這里我統(tǒng)一命名為myradio

鼠標(biāo)移到myradio處右鍵選擇"新建 Component"，接著自動(dòng)生成如下四個(gè)文件

第二步：

分別在myradio.wxml、myradio.wxss和myradio.js中寫入以下代碼↓

myradio.wxml：

//class里是選中與未選中的樣式，point是鼠標(biāo)的點(diǎn)擊事件名，data-index是在point這個(gè)鼠標(biāo)點(diǎn)擊事件的返回值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的選擇器最好寫類選擇器，否則會(huì)警告、甚至出現(xiàn)意料之外的副作用。

//盒子使用彈性布局（給父盒子添加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是因?yàn)楸韱慰丶衝ame和value屬性
            type:String,
            value:"1"
        }
    },

    /**
     * 組件的初始數(shù)據(jù)
     */
    data: {
        currentIndex:1
    },

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

第三步：

在要引入該自定義組件的頁面的json文件中寫上↓

{
    "usingComponents": {
        "myradio":"/components/myradio/myradio"http://這里我把該組件的標(biāo)簽也命名為myradio
    }
}

?然后在要引入的頁面的wxml文件中用myradio標(biāo)簽引入即可，比如↓

<view>//這里包裹該自定義組件的大盒子樣式未給出，可以根據(jù)自身需求寫樣式
   <text>性別</text>
   <myradio name="gender" value="1"></myradio>//myradio標(biāo)簽
</view>

最終效果舉例：（這樣就做好啦！）

文章來源地址http://www.zghlxwxcb.cn/news/detail-485816.html

到了這里，關(guān)于微信小程序之自定義表單組件(radio)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！