本篇文章給大家?guī)?lái)的內(nèi)容是關(guān)于小程序自定義組件的實(shí)現(xiàn)（案例解析），有一定的參考價(jià)值，有需要的朋友可以參考一下，希望對(duì)你有所幫助。

本文將結(jié)合案例，來(lái)闡述自定義組件實(shí)現(xiàn)。
先來(lái)上圖

這個(gè)是一個(gè)購(gòu)物車的數(shù)量組件。主要思路：
1、可以手動(dòng)的輸入具體的數(shù)量
2、可自定義設(shè)置最小值、和最大值。當(dāng)是最小值時(shí)，“-”號(hào)置灰，并不可點(diǎn)擊。當(dāng)是最大值時(shí)，“+”號(hào)置灰，并不可點(diǎn)擊。
3、當(dāng)手動(dòng)輸入“0”開(kāi)頭的數(shù)字時(shí)，自行過(guò)濾，禁止輸入，只值輸入非0數(shù)字。
4、當(dāng)手動(dòng)輸入數(shù)字大于最大值時(shí)，輸入框失去焦點(diǎn)，默認(rèn)將輸入值置為最大值。或者當(dāng)手動(dòng)輸入數(shù)字小于最小值時(shí)，輸入框失去焦點(diǎn)，默認(rèn)將輸入值置為最小值
5、如果屬性值minNum最小值、或者maxNum最大值設(shè)置為NaN，則表示最小值和最大值的大小沒(méi)有輸入的限制
6、默認(rèn)最小值和最大值是沒(méi)有限制的，可以隨便輸入

一、使用自定義組件的方式1、js文件中：

輸入框數(shù)值變化最終響應(yīng)的函數(shù)  showNumber: function (e) {    var num = e.detail.num  },

2、json文件中：

{  "usingComponents": {    /**    *  key:自定義組件的別名，在使用組件時(shí)用到。相當(dāng)于Android自定義控件在xml文件中的申明的命名空間    *  value: 自定義組件的全路徑    */    "component-option-num": "/component/optionNumber-component/optionNumber-component"  }}

3、wxml文件中：

1、這里設(shè)置了最小值是0，最大值是20。
2、bindoptionNum：是由bind+"optionNum"自定義組件回調(diào)函數(shù)的名稱組成。當(dāng)自定義組件的函數(shù)回調(diào)是，這個(gè)屬性指定的方法bindoptionNum將被響應(yīng)。并可以獲取傳入的值

<component-option-num bindoptionNum="showNumber" minNum="0" maxNum="20"></component-option-num>

一、自定義組件的定義1、 對(duì)外提供的自定義屬性值

  /**   * 組件的屬性列表   */  properties: {  //最小值     minNum:{       type:Number,       value: NaN     },//最大值     maxNum:{       type:Number,       value:NaN     },  },

2、 組件內(nèi)部使用的數(shù)據(jù)

  /**   * 組件的初始數(shù)據(jù)   */  data: {    num: 0,                //輸入框顯示的數(shù)量    disabledMin: false,    //"-"是否可點(diǎn)擊，true 不能點(diǎn)擊    disabledMax:false    //"+"是否可點(diǎn)擊，true 不能點(diǎn)擊  },

3、 增加數(shù)量方法

   _add: function (e) {      let num = parseInt(this.data.num) + 1      if (this.checkIsMaxNum(num)) {            /**       * 大于最大數(shù)值，將輸入框的值設(shè)置為最大值，       * 且"+"不能點(diǎn)擊、"-"可點(diǎn)擊       */         num = this.data.maxNum        this.data.disabledMax = true         this.data.disabledMin = false      }else {        this.data.disabledMin = false        this.data.disabledMax = false       }      this.setData({        num: num,        disabledMin: this.data.disabledMin,        disabledMax: this.data.disabledMax      })      //回調(diào)optionNum方法，將輸入框num值傳遞給使用該組件的函數(shù)      this.triggerEvent('optionNum', { num: num })    },

4、減少數(shù)量

    _reduce: function (e) {      let num, disabledMin, disabledMax      num = parseInt(this.data.num) - 1      if (this.checkIsMinNum(num)) { //小于最小數(shù)       /**     * 小于最小數(shù)值，將輸入框的值設(shè)置為最小值，     * 且"-"不能點(diǎn)擊、"+"可點(diǎn)擊     */         num = this.data.minNum        disabledMin = true        disabledMax = false      }else{        disabledMin = false        disabledMax = false      }      this.setData({        num: num,        disabledMin: disabledMin,        disabledMax: disabledMax      })      //回調(diào)optionNum方法，將輸入框num值傳遞給使用該組件的函數(shù)      this.triggerEvent('optionNum',{num:num})    },

5、手動(dòng)輸入數(shù)量

    _input: function (e) {      let val = e.detail.value      //1、先用正則校驗(yàn)輸入的第一個(gè)數(shù)字，當(dāng)手動(dòng)輸入“0”開(kāi)頭的數(shù)字時(shí)，自行過(guò)濾，禁止輸入，只值輸入非0數(shù)字      var num = val.replace(/^[0]+[0-9]*$/gi, "")       /**     * 大于最大數(shù)值，將輸入框的值設(shè)置為最大值，且"+"不能點(diǎn)擊、"-"可點(diǎn)擊。反之亦然     */       if (this.checkIsMinNum(num)) {  //小于最小數(shù)        this.data.disabledMin = true        this.data.disabledMax = false      } else if (this.checkIsMaxNum(num)) {    //大于最大數(shù)        this.data.disabledMax = true        this.data.disabledMin = false      } else {        this.data.disabledMin = false        this.data.disabledMax = false      }      this.setData({        num: num,        disabledMin: this.data.disabledMin,        disabledMax:this.data.disabledMax      })      this.triggerEvent('optionNum', { num: num })    },              
              

            
購(gòu)物車,數(shù)量組件