>  기사  >  위챗 애플릿  >  미니프로그램의 맞춤형 구성요소 구현(사례분석)

미니프로그램의 맞춤형 구성요소 구현(사례분석)

不言
不言원래의
2018-09-18 16:36:182482검색

이 기사의 내용은 미니 프로그램의 사용자 정의 구성요소 구현(사례 분석)에 관한 것입니다. 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.

이 기사에서는 사례를 사용하여 사용자 정의 구성 요소 구현을 설명합니다.
위 그림부터 살펴보겠습니다.
미니프로그램의 맞춤형 구성요소 구현(사례분석)

장바구니의 수량 구성 요소입니다. 주요 아이디어:
1. 특정 수량을 수동으로 입력할 수 있습니다
2. 최소값과 최대값을 맞춤 설정할 수 있습니다. 최소값일 경우 "-" 기호가 회색으로 표시되어 클릭할 수 없습니다. 최대값일 경우 "+" 기호가 회색으로 표시되어 클릭할 수 없습니다.
3. "0"으로 시작하는 숫자를 수동으로 입력할 경우 자동으로 필터링되어 0이 아닌 숫자만 입력이 금지됩니다.
4. 수동으로 입력한 숫자가 최대값보다 클 경우 입력 상자는 초점을 잃고 입력값은 기본적으로 최대값으로 설정됩니다. 또는 수동으로 입력한 숫자가 최소값보다 작을 경우 입력 상자는 초점을 잃고 입력값은 기본적으로 최소값으로 설정됩니다
5. 최소 속성 값 minNum 또는 최대 값 maxNum이 NaN으로 설정된 경우 최소값 및 최대값 크기에 입력 제한이 없음을 의미합니다 ​​
6. 기본 최소값과 최대값에는 제한이 없으며 자유롭게 입력할 수 있습니다.

1. 맞춤 구성 요소 사용 방법

1. js 파일:

输入框数值变化最终响应的函数
  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. binoptionNum: 커스텀 컴포넌트 콜백 함수의 이름인 "optionNum"과 바인딩으로 구성됩니다. 사용자 정의 구성 요소의 함수 콜백이 호출되면 이 속성에 지정된 바인딩 옵션 Num 메서드가 응답됩니다. 그리고 들어오는 값을 얻을 수 있습니다

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

1. 사용자 정의 구성 요소의 정의

1. 외부 세계에 제공되는 사용자 정의 속성 값

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

2. 구성 요소에서 내부적으로 사용되는 데이터

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

3. 수량

   _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(&#39;optionNum&#39;, { num: num })
    },

4. 수량을 줄이세요

    _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(&#39;optionNum&#39;,{num:num})
    },

6. 초점을 잃으세요

    _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(&#39;optionNum&#39;, { num: num })
    },

첨부된 것은 js

  _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(&#39;optionNum&#39;, { num: num })
    },

1의 전체 코드입니다. wxml

// 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(&#39;optionNum&#39;,{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(&#39;optionNum&#39;, { 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(&#39;optionNum&#39;, { 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(&#39;optionNum&#39;, { 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
    }
  }
})

3. wxss

<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>

4의 코드 json

.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;}

위 내용은 미니프로그램의 맞춤형 구성요소 구현(사례분석)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.