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

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

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

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

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

2、json文件中：

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

3、wxml文件中：

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

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

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

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

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

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

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

   _add: function (e) {      let num = parseInt(this.data.num) + 1      if (this.checkIsMaxNum(num)) {            /**       * 大于最大數(shù)值，將輸入框的值設置為最大值，       * 且"+"不能點擊、"-"可點擊       */         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ù)值，將輸入框的值設置為最小值，     * 且"-"不能點擊、"+"可點擊     */         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、手動輸入數(shù)量

    _input: function (e) {      let val = e.detail.value      //1、先用正則校驗輸入的第一個數(shù)字，當手動輸入“0”開頭的數(shù)字時，自行過濾，禁止輸入，只值輸入非0數(shù)字      var num = val.replace(/^[0]+[0-9]*$/gi, "")       /**     * 大于最大數(shù)值，將輸入框的值設置為最大值，且"+"不能點擊、"-"可點擊。反之亦然     */       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 })    },              
              

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