지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 위챗 애플릿 > 미니 프로그램 개발 > 미니프로그램의 맞춤형 구성요소 구현(사례분석)

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

不言
풀어 주다： 2018-09-18 16:36:18
원래의
2542명이 탐색했습니다.

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

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

장바구니의 수량 구성 요소입니다. 주요 아이디어:
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
장바구니
원천：php.cn
이전 기사：작은 프로그램에서 일반적으로 사용되는 구문 소개 다음 기사：WeChat 애플릿은 쿠키 코드 구현을 지원합니다.
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
"Cookie" 요청 헤더의 쿠키 수가 "set-cookie" 응답 헤더에 설정된 쿠키 수를 초과하는 이유는 무엇입니까? 저는 웹 크롤링의 초보자이므로 http 요청에 대한 이해가 매우 얕습니다. 장바구니에 추가와 같이 웹사이트에 보내는 특정 요청을 검사할 때 개발 도구는 해당 요청...
에서 2024-04-05 14:52:06
0
1
3571
jQuery.remove() 및 array.splice() 문제 그래서 항목 목록과 쇼핑 목록이 있는 페이지가 있습니다. 항목 목록에서 x개의 항목을 쇼핑 목록에 추가하는 경우 쇼핑 목록에서 항목을 클릭하고 해당 항목을 연 모...
에서 2024-04-04 17:21:35
0
1
347
제거된 특정 항목의 장바구니 항목 키 ID 가져오기: WooCommerce Shopping Cart WooCommerce에는 삭제된 제품(항목)이 고유한지 확인한 다음 해당 정보를 기반으로 추가 코드를 작성해야 하는 사용자 정의 cart.php 템플릿이 있습니다...
에서 2024-04-04 16:35:18
0
1
282
WooCommerce Checkout - 사용자 역할 및 장바구니 내용 확인 WooCommerce의 결제 프로세스에 문제가 있습니다. 저는 일반 제품과 B2B 제품을 구별하기 위해 "B2BforWooCommerce" 플러...
에서 2024-04-03 11:58:52
0
1
475
배송 옵션으로 지역 픽업을 선택할 때 쿠폰 사용을 피하세요 장바구니에 담거나 결제 시 '지역 픽업'을 선택할 때 할인이 추가되는 코드를 사용합니다. /***지역 픽업 할인*/add_action('woocommerce_ca...
에서 2024-04-02 17:42:54
0
1
355
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿