Implementation of custom components of mini program (case analysis)

The content of this article is about the implementation of custom components of mini programs (case analysis). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

This article will combine cases to explain the implementation of custom components.
Let’s start with the picture above

This is the quantity component of a shopping cart. Main idea:
1. You can manually enter the specific quantity
2. The minimum and maximum values ​​can be customized. When it is the minimum value, the "-" sign is grayed out and cannot be clicked. When it is the maximum value, the " " sign is grayed out and cannot be clicked.
3. When manually inputting numbers starting with "0", it will be automatically filtered and input will be prohibited. Only non-0 numbers can be entered.
4. When the manually entered number is greater than the maximum value, the input box loses focus and the input value is set to the maximum value by default. Or when the manually entered number is less than the minimum value, the input box loses focus and the input value is set to the minimum value by default
5. If the minimum attribute value minNum or the maximum value maxNum is set to NaN, it means that there is no input limit on the size of the minimum and maximum values ​​
6. There is no limit to the default minimum and maximum values. You can enter

at will. 1. How to use custom components

1. In the js file:

输入框数值变化最终响应的函数
  showNumber: function (e) {
    var num = e.detail.num
  },

2 , json file:

{  "usingComponents": {    
/**
    *  key:自定义组件的别名，在使用组件时用到。相当于Android自定义控件在xml文件中的申明的命名空间
    *  value: 自定义组件的全路径
    */
    "component-option-num": "/component/optionNumber-component/optionNumber-component"
  }
}

3, wxml file:

1. The minimum value set here is 0, and the maximum value is 20.
2. bindoptionNum: It is composed of the name of the bind "optionNum" custom component callback function. When the function callback of the custom component is called, the method bindoptionNum specified by this attribute will be responded to. And can get the incoming value

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

1. Definition of custom components

1. Custom attribute values ​​provided externally

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

2 , Data used internally in the component

  /**
   * 组件的初始数据
   */
  data: {
    num: 0,                //输入框显示的数量
    disabledMin: false,    //"-"是否可点击，true 不能点击
    disabledMax:false    //"+"是否可点击，true 不能点击
  },

3. Increasing quantity method

   _add: function (e) {
      let num = parseInt(this.data.num) + 1
      if (this.checkIsMaxNum(num)) {       
     /**
       * 大于最大数值，将输入框的值设置为最大值，
       * 且"+"不能点击、"-"可点击
       */ 
        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
      })      //回调optionNum方法，将输入框num值传递给使用该组件的函数
      this.triggerEvent('optionNum', { num: num })
    },

4. Decreasing quantity

    _reduce: function (e) {
      let num, disabledMin, disabledMax
      num = parseInt(this.data.num) - 1
      if (this.checkIsMinNum(num)) { //小于最小数
       /**
     * 小于最小数值，将输入框的值设置为最小值，
     * 且"-"不能点击、"+"可点击
     */ 
        num = this.data.minNum
        disabledMin = true
        disabledMax = false
      }else{
        disabledMin = false
        disabledMax = false
      }      this.setData({
        num: num,
        disabledMin: disabledMin,
        disabledMax: disabledMax
      })      //回调optionNum方法，将输入框num值传递给使用该组件的函数
      this.triggerEvent('optionNum',{num:num})
    },

5. Manually input quantity

    _input: function (e) {
      let val = e.detail.value      //1、先用正则校验输入的第一个数字，当手动输入“0”开头的数字时，自行过滤，禁止输入，只值输入非0数字
      var num = val.replace(/^[0]+[0-9]*$/gi, "")       /**
     * 大于最大数值，将输入框的值设置为最大值，且"+"不能点击、"-"可点击。反之亦然
     */ 
      if (this.checkIsMinNum(num)) {  //小于最小数
        this.data.disabledMin = true
        this.data.disabledMax = false
      } else if (this.checkIsMaxNum(num)) {    //大于最大数
        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. Lost focus

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

Attached are all the codes of the custom component

1, code in js

// component/optionNumber-component/optionNumber-component.jsComponent({  /**
   * 组件的属性列表
   */
  properties: {
     minNum:{
       type:Number,
       value: NaN
     },

     maxNum:{
       type:Number,
       value:NaN
     },
  },  /**
   * 组件的初始数据
   */
  data: {
    num: 0,
    disabledMin: false,
    disabledMax:false
  },

  lifetimes:{    // 初始化数据
    attached:function(){
      let num, disabledMin, disabledMax      
      if (this.checkIsMinNum(this.data.num)) { //小于最小数
        num = this.data.minNum
        disabledMin = true
        disabledMax = false
      } else if (this.checkIsMaxNum(this.data.num)){     //大于最大数
        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: {    // 减少数量
    _reduce: function (e) {
      // console.log("_reduce======", this.data.maxNum)
      let num, disabledMin, disabledMax
      num = parseInt(this.data.num) - 1
      if (this.checkIsMinNum(num)) { //小于最小数
        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})
    },    // 增加数量
    _add: function (e) {
      let num = parseInt(this.data.num) + 1
      // console.log("_add======", this.data.maxNum)
      if (this.checkIsMaxNum(num)) {        //大于最大数
        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 })
    },    // 手动输入数量
    _input: function (e) {
      let val = e.detail.value      var num = val.replace(/^[0]+[0-9]*$/gi, "")      if (this.checkIsMinNum(num)) {  //小于最小数
        this.data.disabledMin = true
        this.data.disabledMax = false
      } else if (this.checkIsMaxNum(num)) {    //大于最大数
        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 })
    },  // 失去焦点
    _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)) {    //输入的数量 小于最小的数，则输入框显示最小值
        num = this.data.minNum
        disabledMin = true
        disabledMax = false
      } else if (this.checkIsMaxNum(num)) {     //输入的数量 大于最大的数，则输入框显示最大值
        this.data.disabledMax = true
        num = this.data.maxNum
        disabledMin = false
        disabledMax = true
      } else {     //输入的数量 大于最小的数，则输入框显示输入值
        disabledMin = false
        disabledMax = false
      }      this.setData({
        num: num,
        disabledMin: disabledMin,
        disabledMax: disabledMax
      })      this.triggerEvent('optionNum', { num: num })
    },    // 检查是否是最大数
    checkIsMaxNum: function (checkNum) {
      return this.data.maxNum != "NaN" && checkNum >= this.data.maxNum
    },    // 检查是否是最小数
    checkIsMinNum: function (checkNum) {
      return this.data.minNum != "NaN" && checkNum <= this.data.minNum
    }
  }
})

2, code in wxml

<view class=&#39;optionView&#39;>
  <button class="item" bindtap="_reduce" disabled="{{disabledMin}}" style="border:0;background:white" plain=&#39;true&#39;>
    <image class="imgReduce" src="{{disabledMin ? &#39;/images/icon/ic_reduce_grey.png&#39; : &#39;/images/icon/ic_reduce.png&#39;}}"></image>
  </button>
  <view class="space">|</view>
  <view class="item">
    <input class="inputNum" type=&#39;number&#39; maxlength=&#39;3&#39; bindinput="_input" value="{{num}}" placeholder="0" confirm-type="确认" 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=&#39;true&#39;>
    <image class="imgAdd" src="{{disabledMax ? &#39;/images/icon/ic_add_grey.png&#39; : &#39;/images/icon/ic_add.png&#39;}}"></image>
  </button></view>

3, Code in 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, code in json

{
  "component": true,
  "usingComponents": {}}

The above is the detailed content of Implementation of custom components of mini program (case analysis). For more information, please follow other related articles on the PHP Chinese website!