溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下小程序使用自定義組件的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
先來上圖 
這個是一個購物車的數量組件。主要思路：
1、可以手動的輸入具體的數量
2、可自定義設置最小值、和最大值。當是最小值時，“-”號置灰，并不可點擊。當是最大值時，“+”號置灰，并不可點擊。
3、當手動輸入“0”開頭的數字時，自行過濾，禁止輸入，只值輸入非0數字。
4、當手動輸入數字大于最大值時，輸入框失去焦點，默認將輸入值置為最大值。或者當手動輸入數字小于最小值時，輸入框失去焦點，默認將輸入值置為最小值
5、如果屬性值minNum最小值、或者maxNum最大值設置為NaN，則表示最小值和最大值的大小沒有輸入的限制
6、默認最小值和最大值是沒有限制的，可以隨便輸入
輸入框數值變化最終響應的函數
showNumber: function (e) {
var num = e.detail.num
},{ "usingComponents": {
/**
* key:自定義組件的別名，在使用組件時用到。相當于Android自定義控件在xml文件中的申明的命名空間
* value: 自定義組件的全路徑
*/
"component-option-num": "/component/optionNumber-component/optionNumber-component"
}
}1、這里設置了最小值是0，最大值是20。
2、bindoptionNum：是由bind+"optionNum"自定義組件回調函數的名稱組成。當自定義組件的函數回調是，這個屬性指定的方法bindoptionNum將被響應。并可以獲取傳入的值
<component-option-num bindoptionNum="showNumber" minNum="0" maxNum="20"></component-option-num>
/**
* 組件的屬性列表
*/
properties: { //最小值
minNum:{ type:Number,
value: NaN
},//最大值
maxNum:{ type:Number,
value:NaN
},
}, /**
* 組件的初始數據
*/
data: {
num: 0, //輸入框顯示的數量
disabledMin: false, //"-"是否可點擊，true 不能點擊
disabledMax:false //"+"是否可點擊，true 不能點擊
}, _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 })
}, _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})
}, _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 })
}, _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 })
},// 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
}
}
})<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>.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;}{
"component": true,
"usingComponents": {}}以上是“小程序使用自定義組件的示例”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
