第二篇：自定義組件——購物車控件

本文將結(jié)合案例，來闡述自定義組件實(shí)現(xiàn)。點(diǎn)擊我查看完整項(xiàng)目
先來上圖

自定義控件.png

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

一、使用自定義組件的方式

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、 對外提供的自定義屬性值

  /**
   * 組件的屬性列表
   */
  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、手動輸入數(shù)量

    _input: function (e) {
      let val = e.detail.value
      //1、先用正則校驗(yàn)輸入的第一個(gè)數(shù)字，當(dāng)手動輸入“0”開頭的數(shù)字時(shí)，自行過濾，禁止輸入，只值輸入非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 })
    },

6、失去焦點(diǎn)

  _blur:function(e){
      let val = e.detail.value
      let num = val.replace(/^[0]+[0-9]*$/gi, "")
      let disabledMin, disabledMax
      if (this.checkIsMinNum(num)) {    //輸入的數(shù)量 小于最小的數(shù)，則輸入框顯示最小值
        num = this.data.minNum
        disabledMin = true
        disabledMax = false
      } else if (this.checkIsMaxNum(num)) {     //輸入的數(shù)量 大于最大的數(shù)，則輸入框顯示最大值
        this.data.disabledMax = true
        num = this.data.maxNum
        disabledMin = false
        disabledMax = true
      } else {     //輸入的數(shù)量 大于最小的數(shù)，則輸入框顯示輸入值
        disabledMin = false
        disabledMax = false
      }
      this.setData({
        num: num,
        disabledMin: disabledMin,
        disabledMax: disabledMax
      })
      this.triggerEvent('optionNum', { num: num })
    },

附自定義組件的全部代碼

1、js中的代碼

// component/optionNumber-component/optionNumber-component.js
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
     minNum:{
       type:Number,
       value: NaN
     },

     maxNum:{
       type:Number,
       value:NaN
     },
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    num: 0,
    disabledMin: false,
    disabledMax:false
  },

  lifetimes:{
    // 初始化數(shù)據(jù)
    attached:function(){
      let num, disabledMin, disabledMax
      if (this.checkIsMinNum(this.data.num)) { //小于最小數(shù)
        num = this.data.minNum
        disabledMin = true
        disabledMax = false
      } else if (this.checkIsMaxNum(this.data.num)){     //大于最大數(shù)
        num = this.data.maxNum
        disabledMax = true
        disabledMin = false
      }else {
        num = this.data.num
        disabledMin = false
        disabledMax = false
      }
      this.setData({
        num: num,
        disabledMin: disabledMin,
        disabledMax: disabledMax
      })
    },
  },


  /**
   * 組件的方法列表
   */
  methods: {
    // 減少數(shù)量
    _reduce: function (e) {
      // console.log("_reduce======", this.data.maxNum)
      let num, disabledMin, disabledMax
      num = parseInt(this.data.num) - 1
      if (this.checkIsMinNum(num)) { //小于最小數(shù)
        num = this.data.minNum
        disabledMin = true
        disabledMax = false
      }else{
        disabledMin = false
        disabledMax = false
      }
      this.setData({
        num: num,
        disabledMin: disabledMin,
        disabledMax: disabledMax
      })
      // console.log("disabledMin======", this.data.disabledMin)
      this.triggerEvent('optionNum',{num:num})
    },

    // 增加數(shù)量
    _add: function (e) {
      let num = parseInt(this.data.num) + 1
      // console.log("_add======", this.data.maxNum)
      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
      })
      this.triggerEvent('optionNum', { num: num })
    },


    // 手動輸入數(shù)量
    _input: function (e) {
      let val = e.detail.value
      var num = val.replace(/^[0]+[0-9]*$/gi, "")
      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 })
    },

  // 失去焦點(diǎn)
    _blur:function(e){
      // console.log("_confirm======")
      let val = e.detail.value
      let num = val.replace(/^[0]+[0-9]*$/gi, "")
      let disabledMin, disabledMax
      if (this.checkIsMinNum(num)) {    //輸入的數(shù)量 小于最小的數(shù)，則輸入框顯示最小值
        num = this.data.minNum
        disabledMin = true
        disabledMax = false
      } else if (this.checkIsMaxNum(num)) {     //輸入的數(shù)量 大于最大的數(shù)，則輸入框顯示最大值
        this.data.disabledMax = true
        num = this.data.maxNum
        disabledMin = false
        disabledMax = true
      } else {     //輸入的數(shù)量 大于最小的數(shù)，則輸入框顯示輸入值
        disabledMin = false
        disabledMax = false
      }
      this.setData({
        num: num,
        disabledMin: disabledMin,
        disabledMax: disabledMax
      })
      this.triggerEvent('optionNum', { num: num })
    },

    // 檢查是否是最大數(shù)
    checkIsMaxNum: function (checkNum) {
      return this.data.maxNum != "NaN" && checkNum >= this.data.maxNum
    },
    // 檢查是否是最小數(shù)
    checkIsMinNum: function (checkNum) {
      return this.data.minNum != "NaN" && checkNum <= this.data.minNum
    }
  }
})

2、wxml中的代碼

<view class='optionView'>
  <button class="item" bindtap="_reduce" disabled="{{disabledMin}}" style="border:0;background:white" plain='true'>
    <image class="imgReduce" src="{{disabledMin ? '/images/icon/ic_reduce_grey.png' : '/images/icon/ic_reduce.png'}}"></image>
  </button>
  <view class="space">|</view>
  <view class="item">
    <input class="inputNum" type='number' maxlength='3' bindinput="_input" value="{{num}}" placeholder="0" confirm-type="確認(rèn)" bindblur="_blur" placeholder-style="font-size:26rpx;color:#C81432"></input>
  </view>
  <view class="space">|</view>
  <button class="item" bindtap="_add" disabled="{{disabledMax}}" style="margin-left:6rpx;border:0;background:white" plain='true'>
    <image class="imgAdd" src="{{disabledMax ? '/images/icon/ic_add_grey.png' : '/images/icon/ic_add.png'}}"></image>
  </button>
</view>

3、wxss中的代碼

.optionView{
  height: 58rpx;
  width: 240rpx;
  display: flex;
  flex-direction: row;
  border: 1rpx solid #999;
  border-radius: 10rpx;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  background: white;
  margin-right: 64rpx;
}

.item{
  flex: 1;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: space-around;
}
.space{
  height: 40rpx;
  width: 1rpx;
  color:  #999;
  font-size: 30rpx;
}
.imgAdd{
  width: 16rpx;
  height: 16rpx;
  padding-top: 14rpx;
  padding-bottom: 14rpx
}
.imgReduce{
  width: 16rpx;
  height: 3.5rpx;

  padding-top: 18rpx;
  padding-bottom: 18rpx
}
.inputNum{
    width: 70rpx;
    color: #C81432;
    font-size: 26rpx;
    text-align: center;
    padding-left: 10rpx;
    padding-right: 10rpx;
}
.textMax{
  margin-top: 45rpx;
  margin-bottom: 36rpx;
}

4、json中的代碼

{
  "component": true,
  "usingComponents": {}
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1、通過CocoaPods安裝項(xiàng)目名稱項(xiàng)目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地?cái)?shù)據(jù)庫組件 SD...
    陽明AI閱讀 16,222評論 3贊 119
  • 親子日記第158 這幾天妞妞一直跟著我去門市，開門后就給我打掃衛(wèi)生，拖地，拖完地還不讓我進(jìn)去說怕能臟了，等地...
    一年級七班王爍樺媽媽閱讀 164評論 0贊 3
  • 偶是韜華編輯孔瀾，現(xiàn)招寫手10名，審核題材不限，字?jǐn)?shù)不限『不過，最好是500字以上也不需要太長』，如果有想加入工作...
    噗分離閱讀 302評論 1贊 2
  • 不奉天旨不奉詔， 獨(dú)立此身自逍遙。 顯圣二郎真君在， 不使妖猴上碧霄。
    xueshuai閱讀 421評論 0贊 1
  • 休閑成都，奮進(jìn)完美。 少不入川老不出蜀，人人都說成都是一座來了就不想離開的城市。 寬窄巷子，留下來的老墻、門洞、拴...
    孔祥延閱讀 314評論 0贊 0

友情鏈接更多精彩內(nèi)容