版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
【移動(dòng)應(yīng)用開發(fā)技術(shù)】小程序使用自定義組件的示例
在下給大家分享一下小程序使用自定義組件的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！先來上圖這個(gè)是一個(gè)購物車的數(shù)量組件。主要思路：
1、可以手動(dòng)的輸入具體的數(shù)量
2、可自定義設(shè)置最小值、和最大值。當(dāng)是最小值時(shí)，“-”號(hào)置灰，并不可點(diǎn)擊。當(dāng)是最大值時(shí)，“+”號(hào)置灰，并不可點(diǎn)擊。
3、當(dāng)手動(dòng)輸入“0”開頭的數(shù)字時(shí)，自行過濾，禁止輸入，只值輸入非0數(shù)字。
4、當(dāng)手動(dòng)輸入數(shù)字大于最大值時(shí)，輸入框失去焦點(diǎn)，默認(rèn)將輸入值置為最大值?；蛘弋?dāng)手動(dòng)輸入數(shù)字小于最小值時(shí)，輸入框失去焦點(diǎn)，默認(rèn)將輸入值置為最小值
5、如果屬性值minNum最小值、或者maxNum最大值設(shè)置為NaN，則表示最小值和最大值的大小沒有輸入的限制
6、默認(rèn)最小值和最大值是沒有限制的，可以隨便輸入一、使用自定義組件的方式1、js文件中：輸入框數(shù)值變化最終響應(yīng)的函數(shù)
showNumber:
function
(e)
{
var
num
=
e.detail.num
},2、json文件中：{
"usingComponents":
{
/**
*
key:自定義組件的別名，在使用組件時(shí)用到。相當(dāng)于Android自定義控件在xml文件中的申明的命名空間
*
value:
自定義組件的全路徑
*/
"component-option-num":
"/component/optionNumber-component/optionNumber-component"
}
}3、wxml文件中：1、這里設(shè)置了最小值是0，最大值是20。2、bindoptionNum：是由bind+"optionNum"自定義組件回調(diào)函數(shù)的名稱組成。當(dāng)自定義組件的函數(shù)回調(diào)是，這個(gè)屬性指定的方法bindoptionNum將被響應(yīng)。并可以獲取傳入的值<component-option-num
bindoptionNum="showNumber"
minNum="0"
maxNum="20"></component-option-num>一、自定義組件的定義1、對(duì)外提供的自定義屬性值
/**
*
組件的屬性列表
*/
properties:
{
//最小值
minNum:{
type:Number,
value:
NaN
},//最大值
maxNum:{
type:Number,
value:NaN
},
},2、組件內(nèi)部使用的數(shù)據(jù)
/**
*
組件的初始數(shù)據(jù)
*/
data:
{
num:
0,
//輸入框顯示的數(shù)量
disabledMin:
false,
//"-"是否可點(diǎn)擊，true
不能點(diǎn)擊
disabledMax:false
//"+"是否可點(diǎn)擊，true
不能點(diǎn)擊
},3、增加數(shù)量方法
_add:
function
(e)
{
let
num
=
parseInt(this.data.num)
+
1
if
(this.checkIsMaxNum(num))
{
/**
*
大于最大數(shù)值，將輸入框的值設(shè)置為最大值，
*
且"+"不能點(diǎn)擊、"-"可點(diǎn)擊
*/
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
})
//回調(diào)optionNum方法，將輸入框num值傳遞給使用該組件的函數(shù)
this.triggerEvent('optionNum',
{
num:
num
})
},4、減少數(shù)量
_reduce:
function
(e)
{
let
num,
disabledMin,
disabledMax
num
=
parseInt(this.data.num)
-
1
if
(this.checkIsMinNum(num))
{
//小于最小數(shù)
/**
*
小于最小數(shù)值，將輸入框的值設(shè)置為最小值，
*
且"-"不能點(diǎn)擊、"+"可點(diǎn)擊
*/
num
=
this.data.minNum
disabledMin
=
true
disabledMax
=
false
}else{
disabledMin
=
false
disabledMax
=
false
}
this.setData({
num:
num,
disabledMin:
disabledMin,
disabledMax:
disabledMax
})
//回調(diào)optionNum方法，將輸入框num值傳遞給使用該組件的函數(shù)
this.triggerEvent('optionNum',{num:num})
},5、手動(dòng)輸入數(shù)量
_input:
function
(e)
{
let
val
=
e.detail.value
//1、先用正則校驗(yàn)輸入的第一個(gè)數(shù)字，當(dāng)手動(dòng)輸入“0”開頭的數(shù)字時(shí)，自行過濾，禁止輸入，只值輸入非0數(shù)字
var
num
=
val.replace(/^[0]+[0-9]*$/gi,
"")
/**
*
大于最大數(shù)值，將輸入框的值設(shè)置為最大值，且"+"不能點(diǎn)擊、"-"可點(diǎn)擊。反之亦然
*/
if
(this.checkIsMinNum(num))
{
//小于最小數(shù)
this.data.disabledMin
=
true
this.data.disabledMax
=
false
}
else
if
(this.checkIsMaxNum(num))
{
//大于最大數(shù)
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
})
},6、失去焦點(diǎn)
_blur:function(e){
let
val
=
e.detail.value
let
num
=
val.replace(/^[0]+[0-9]*$/gi,
"")
let
disabledMin,
disabledMax
if
(this.checkIsMinNum(num))
{
//輸入的數(shù)量
小于最小的數(shù)，則輸入框顯示最小值
num
=
this.data.minNum
disabledMin
=
true
disabledMax
=
false
}
else
if
(this.checkIsMaxNum(num))
{
//輸入的數(shù)量
大于最大的數(shù)，則輸入框顯示最大值
this.data.disabledMax
=
true
num
=
this.data.maxNum
disabledMin
=
false
disabledMax
=
true
}
else
{
//輸入的數(shù)量
大于最小的數(shù)，則輸入框顯示輸入值
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
},
},
/**
*
組件的初始數(shù)據(jù)
*/
data:
{
num:
0,
disabledMin:
false,
disabledMax:false
},
lifetimes:{
//
初始化數(shù)據(jù)
attached:function(){
let
num,
disabledMin,
disabledMax
if
(this.checkIsMinNum(this.data.num))
{
//小于最小數(shù)
num
=
this.data.minNum
disabledMin
=
true
disabledMax
=
false
}
else
if
(this.checkIsMaxNum(this.data.num)){
//大于最大數(shù)
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:
{
//
減少數(shù)量
_reduce:
function
(e)
{
//
console.log("_reduce======",
this.data.maxNum)
let
num,
disabledMin,
disabledMax
num
=
parseInt(this.data.num)
-
1
if
(this.checkIsMinNum(num))
{
//小于最小數(shù)
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})
},
//
增加數(shù)量
_add:
function
(e)
{
let
num
=
parseInt(this.data.num)
+
1
//
console.log("_add======",
this.data.maxNum)
if
(this.checkIsMaxNum(num))
{
//大于最大數(shù)
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
})
},
//
手動(dòng)輸入數(shù)量
_input:
function
(e)
{
let
val
=
e.detail.value
var
num
=
val.replace(/^[0]+[0-9]*$/gi,
"")
if
(this.checkIsMinNum(num))
{
//小于最小數(shù)
this.data.disabledMin
=
true
this.data.disabledMax
=
false
}
else
if
(this.checkIsMaxNum(num))
{
//大于最大數(shù)
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
})
},
//
失去焦點(diǎn)
_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))
{
//輸入的數(shù)量
小于最小的數(shù)，則輸入框顯示最小值
num
=
this.data.minNum
disabledMin
=
true
disabledMax
=
false
}
else
if
(this.checkIsMaxNum(num))
{
//輸入的數(shù)量
大于最大的數(shù)，則輸入框顯示最大值
this.data.disabledMax
=
true
num
=
this.data.maxNum
disabledMin
=
false
disabledMax
=
true
}
else
{
//輸入的數(shù)量
大于最小的數(shù)，則輸入框顯示輸入值
disabledMin
=
false
disabledMax
=
false
}
this.setData({
num:
num,
disabledMin:
disabledMin,
disabledMax:
disabledMax
})
this.triggerEvent('optionNum',
{
num:
num
})
},
//
檢查是否是最大數(shù)
checkIsMaxNum:
function
(checkNum)
{
return
this.data.maxNum
!=
"NaN"
&&
checkNum
>=
this.data.maxNum
},
//
檢查是否是最小數(shù)
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="確認(rèn)"
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="{
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 第二章 疾病概論課件
- 治療室、換藥室、處置室消毒隔離制度
- 管道打壓吹掃方案
- 環(huán)境保護(hù)專項(xiàng)施工方案
- 浙教版2021-2022學(xué)年度七年級(jí)數(shù)學(xué)上冊模擬測試卷 (826)【含簡略答案】
- Metixene-hydrochloride-hydrate-Standard-生命科學(xué)試劑-MCE
- Methyl-D-galactoside-Methyl-D-Galactopyranoside-生命科學(xué)試劑-MCE
- meso-Erythritol-Standard-生命科學(xué)試劑-MCE
- 教師面試之課程設(shè)計(jì)
- 教師節(jié)課程設(shè)計(jì)
- 中考數(shù)學(xué)一輪復(fù)習(xí)課件全等三角形
- 新教科版科學(xué)六年級(jí)上冊第三單元工具與技術(shù)表格式核心素養(yǎng)目標(biāo)教案
- 2022-2023學(xué)年北京市西城區(qū)三帆中學(xué)七年級(jí)（上）期中數(shù)學(xué)試卷
- 國測省測四年級(jí)勞動(dòng)質(zhì)量檢測試卷
- 2024-2029年安徽省家具行業(yè)分析及發(fā)展前景預(yù)測報(bào)告預(yù)測
- 英語四級(jí)單詞4500
- （高清版）TDT 1031.3-2011 土地復(fù)墾方案編制規(guī)程 第3部分：井工煤礦
- 2023年10月自考02187電工與電子技術(shù)試題及答案含評(píng)分標(biāo)準(zhǔn)
- 生產(chǎn)前的準(zhǔn)備工作
- ?？破餍堤幚砹鞒膛嘤?xùn)課件
- 六年級(jí)上冊數(shù)學(xué)心得體會(huì)
評(píng)論
0/150
提交評(píng)論