Maison > Article > Applet WeChat > Implémentation de composants personnalisés du mini programme (analyse de cas)
Implémentation de composants personnalisés du mini programme (analyse de cas)
- 不言original
- 2018-09-18 16:36:182500parcourir
Le contenu de cet article concerne la mise en œuvre de composants personnalisés de mini-programmes (analyse de cas). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Cet article combinera des cas pour expliquer l'implémentation de composants personnalisés.
Commençons par l'image ci-dessus 
Il s'agit de la composante quantité d'un panier. Idée principale :
1. Vous pouvez saisir manuellement la quantité spécifique
2. Les valeurs minimales et maximales peuvent être personnalisées. Lorsqu'il s'agit de la valeur minimale, le signe "-" est grisé et ne peut pas être cliqué. Lorsqu'il s'agit de la valeur maximale, le signe "+" est grisé et ne peut pas être cliqué.
3. Lors de la saisie manuelle de nombres commençant par « 0 », ils seront automatiquement filtrés et la saisie sera interdite. Seuls les nombres non 0 peuvent être saisis.
4. Lorsque le nombre saisi manuellement est supérieur à la valeur maximale, la zone de saisie perd le focus et la valeur saisie est définie sur la valeur maximale par défaut. Ou lorsque le nombre saisi manuellement est inférieur à la valeur minimale, la zone de saisie perd le focus et la valeur de saisie est définie sur la valeur minimale par défaut
5. Si la valeur d'attribut minimale minNum ou la valeur maximale maxNum est définie sur NaN, cela signifie qu'il n'y a pas de limite d'entrée sur la taille des valeurs minimale et maximale
6. Il n'y a pas de limite aux valeurs minimales et maximales par défaut. Vous pouvez les saisir à volonté
1. Comment utiliser des composants personnalisés
1. Dans le fichier js :
输入框数值变化最终响应的函数
showNumber: function (e) {
var num = e.detail.num
},2. Dans le fichier json : { "usingComponents": {
/**
* key:自定义组件的别名，在使用组件时用到。相当于Android自定义控件在xml文件中的申明的命名空间
* value: 自定义组件的全路径
*/
"component-option-num": "/component/optionNumber-component/optionNumber-component"
}
}3. Dans le fichier wxml :
2. bindoptionNum : Il est composé de bind+"optionNum" le nom de la fonction de rappel du composant personnalisé. Lorsque le rappel de fonction du composant personnalisé est appelé, la méthode bindoptionNum spécifiée par cet attribut recevra une réponse. Et peut obtenir la valeur entrante
<component-option-num bindoptionNum="showNumber" minNum="0" maxNum="20"></component-option-num>1. Définition des composants personnalisés 1. Valeurs d'attribut personnalisées fournies en externe 2. Données utilisées dans le composant
/**
* 组件的属性列表
*/
properties: { //最小值
minNum:{ type:Number,
value: NaN
},//最大值
maxNum:{ type:Number,
value:NaN
},
},3. Méthode d'augmentation de la quantité /**
* 组件的初始数据
*/
data: {
num: 0, //输入框显示的数量
disabledMin: false, //"-"是否可点击，true 不能点击
disabledMax:false //"+"是否可点击，true 不能点击
},4. Quantité décroissante _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 })
},5. _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. Concentration perdue _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 })
},Joindre tous les codes des composants personnalisés _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. Code en js
2. Coder en 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. Coder en 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.Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!