미니프로그램의 맞춤형 구성요소 구현(사례분석)
이 기사의 내용은 미니 프로그램의 사용자 정의 구성요소 구현(사례 분석)에 관한 것입니다. 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.
이 기사에서는 사례를 사용하여 사용자 정의 구성 요소 구현을 설명합니다.
위 그림부터 살펴보겠습니다. 
장바구니의 수량 구성 요소입니다. 주요 아이디어:
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('optionNum', { 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('optionNum',{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('optionNum', { 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('optionNum', { 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('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
}
}
})3. wxss
<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="确认" 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>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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7333
9
1627
14
1351
46
1262
25
1209
29
Java로 간단한 장바구니 기능을 구현하는 방법은 무엇입니까?
Nov 02, 2023 am 11:56 AM
Java로 간단한 장바구니 기능을 구현하는 방법은 무엇입니까? 장바구니는 온라인 상점에서 사용자가 구매하고 싶은 상품을 장바구니에 담고, 상품을 관리할 수 있는 중요한 기능입니다. Java에서는 객체 지향 접근 방식을 사용하여 간단한 장바구니 기능을 구현할 수 있습니다. 먼저 제품 카테고리를 정의해야 합니다. 이 클래스에는 제품 이름, 가격, 수량과 같은 속성과 해당 Getter 및 Setter 메서드가 포함되어 있습니다. 예: publicclassProduct
PHP는 장바구니 기능을 구현합니다.
Jun 22, 2023 am 09:00 AM
우리 일상생활에서 온라인 쇼핑은 매우 흔한 소비 방식이 되었으며, 장바구니 기능 역시 온라인 쇼핑의 중요한 구성 요소 중 하나입니다. 그래서 이번 글에서는 PHP 언어를 사용하여 장바구니 관련 기능을 구현하는 방법을 소개하겠습니다. 1. 기술적 배경 장바구니는 온라인 쇼핑 웹사이트에서 흔히 사용되는 기능입니다. 사용자가 웹사이트에서 일부 제품을 검색할 때 이러한 항목을 가상 장바구니에 추가하면 후속 결제 과정에서 쉽게 선택하고 관리할 수 있습니다. 장바구니에는 일반적으로 다음과 같은 기본 기능이 포함됩니다. 항목 추가:
PHP 몰 개발 능력: 장바구니 디자인 및 주문 동기화 기능
Jul 30, 2023 pm 07:22 PM
PHP 쇼핑몰 개발 스킬: 장바구니 디자인 및 주문 동기화 기능 쇼핑몰 웹사이트에서 장바구니와 주문은 없어서는 안되는 기능입니다. 장바구니는 이용자가 상품을 구매하고 임시 장바구니에 저장하기 위해 사용되며, 주문은 이용자가 상품 구매를 확인한 후 생성되는 기록입니다. 사용자 경험을 향상시키고 오류를 줄이기 위해서는 장바구니 및 주문 동기화 기능을 설계하는 것이 매우 중요합니다. 1. 장바구니 및 주문의 개념 장바구니는 일반적으로 사용자가 구매한 상품을 보관하는 데 사용되는 임시 컨테이너입니다. 사용자는 쉽게 탐색하고 관리할 수 있도록 장바구니에 제품을 추가할 수 있습니다.
Redis와 JavaScript를 사용하여 장바구니 기능을 구현하는 방법
Sep 21, 2023 pm 01:27 PM
장바구니 기능을 구현하기 위해 Redis와 JavaScript를 사용하는 방법 장바구니는 전자상거래 웹사이트에서 매우 일반적인 기능 중 하나입니다. 구매한 상품을 언제든지 관리하세요. 이번 글에서는 Redis와 JavaScript를 이용하여 장바구니 기능을 구현하는 방법을 소개하고 구체적인 코드 예시를 제공하겠습니다. 1. 준비 시작하기 전에 Redis가 설치 및 구성되어 있는지 확인해야 하며, 이는 공식 웹사이트 [https:/
MySQL에서 쇼핑몰의 장바구니 테이블 구조를 어떻게 디자인하나요?
Oct 30, 2023 pm 02:12 PM
MySQL에서 쇼핑몰의 장바구니 테이블 구조를 어떻게 디자인하나요? 전자상거래의 급속한 발전으로 장바구니는 온라인 쇼핑몰의 중요한 부분이 되었습니다. 장바구니는 이용자가 구매한 상품과 관련 정보를 저장하는 데 사용되며, 이용자에게 편리하고 빠른 쇼핑 경험을 제공합니다. MySQL에서 합리적인 장바구니 테이블 구조를 설계하면 개발자가 장바구니 데이터를 효과적으로 저장하고 관리하는 데 도움이 될 수 있습니다. 이 기사에서는 MySQL에서 쇼핑몰의 장바구니 테이블 구조를 설계하는 방법을 소개하고 몇 가지 구체적인 코드 예제를 제공합니다. 먼저 장바구니 테이블에는 다음이 포함되어야 합니다.
PHP를 사용하여 간단한 장바구니 기능을 구현하는 방법
Sep 24, 2023 am 09:13 AM
PHP를 사용하여 간단한 장바구니 기능을 구현하는 방법 장바구니 기능은 전자상거래 웹사이트의 필수 부분입니다. 장바구니 기능을 사용하면 사용자가 관심 있는 항목을 장바구니에 추가한 후 결제를 진행하거나 계속 탐색하고 항목을 추가할 수 있습니다. . 이 기사에서는 PHP를 사용하여 간단한 장바구니 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 데이터베이스 및 테이블 생성 먼저 장바구니 데이터를 저장할 데이터베이스와 테이블을 생성해야 합니다. CREATEDATABASEshopping_ca
실용 튜토리얼: PHP 및 MySQL을 사용한 장바구니 기능에 대한 자세한 설명
Mar 15, 2024 pm 12:27 PM
실용 튜토리얼: PHP 및 MySQL을 사용한 장바구니 기능에 대한 자세한 설명 장바구니 기능은 웹사이트 개발에서 흔히 사용되는 기능 중 하나입니다. 장바구니를 통해 사용자는 구매하려는 상품을 장바구니에 쉽게 추가할 수 있습니다. 그 후 정산 및 결제를 진행합니다. 이 기사에서는 PHP와 MySQL을 사용하여 간단한 장바구니 기능을 구현하는 방법을 자세히 설명하고 구체적인 코드 예제를 제공합니다. 데이터베이스와 데이터 테이블을 생성하려면 먼저 MySQL 데이터베이스에 제품 정보를 저장할 데이터 테이블을 생성해야 합니다. 다음은 간단한 데이터 테이블입니다.
장바구니 수량 알림 기능을 갖춘 Java 스위치 식료품 쇼핑 시스템을 구현하는 방법
Nov 04, 2023 am 09:03 AM
장바구니 수량 알림 기능을 사용하여 Java 스위치 식료품 쇼핑 시스템을 구현하는 방법 인터넷의 급속한 발전으로 전자상거래가 점점 더 대중화되고 있습니다. 점점 더 많은 사람들이 휴대전화나 컴퓨터 웹페이지를 통해 쇼핑을 시작하여 편리하고 효율적인 쇼핑 경험을 즐기고 있습니다. 쇼핑 과정에서 장바구니는 사용자가 좋아하는 제품을 임시 "장바구니"에 담은 후 주문이 확인되면 결제를 진행할 수 있도록 도와주는 필수 도구입니다. 그러나 온라인 쇼핑 중에 사용자는 장바구니에 이미 여러 품목이 있다는 사실을 잊어버리는 경우가 있습니다. 그래서 장바구니를 디자인할 때
