미니프로그램의 맞춤형 구성요소 구현(사례분석)
- 不言원래의
- 2018-09-18 16:36:182515검색
이 기사의 내용은 미니 프로그램의 사용자 정의 구성요소 구현(사례 분석)에 관한 것입니다. 특정 참고 가치가 있으므로 도움이 필요한 친구에게 도움이 되기를 바랍니다.
이 기사에서는 사례를 사용하여 사용자 정의 구성 요소 구현을 설명합니다.
위 그림부터 살펴보겠습니다. 
장바구니의 수량 구성 요소입니다. 주요 아이디어:
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.