|
導(dǎo)讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應(yīng)用。小程序是一種不用下載就能使用的應(yīng)用,也是一項(xiàng)門檻非常高的創(chuàng)新,經(jīng)過將近兩年的發(fā)展,已經(jīng)構(gòu)造了新的小程序開發(fā)環(huán)境和開發(fā)者生態(tài)。 textarea多行輸入框組件說明:textarea 多行輸入框。 textarea多行輸入框示例代碼運(yùn)行效果如下:
下面是WXML代碼: <view class="content"> placeholder: <textarea placeholder="占位符" /> <textarea placeholder="占位符 改變樣式style" placeholder-style= "color:blue"/> <textarea placeholder="占位符 改變樣式class" placeholder-class="placeholdText"/> </view> 下面是WXSS代碼: .content{
border:1px black solid;
margin: 10px;
font-size: 10pt;
padding: 10px;
}
textarea{
border: 1px red solid;
margin: auto;
width:100%;
height: 3em;
margin-top:5px;
padding: 3px;
}
/*占位符樣式*/
.placeholdText{
font-size: 2em;
}textarea多行輸入框的事件效果圖:
下面是WXML代碼:: <view class="content">
auto-height:
<textarea auto-height placeholder="自動(dòng)增高,style.height不生效"/>
bindinput="當(dāng)內(nèi)容改變"
<textarea placeholder="" bindlinechange="bindlinechange"/>
bindfocus:當(dāng)獲取焦點(diǎn)
<textarea placeholder="當(dāng)獲取焦點(diǎn)" value="" bindfocus="bindfocus"/>
bindblur:當(dāng)失去焦點(diǎn)觸發(fā)
<textarea placeholder="當(dāng)失去焦點(diǎn)" bindblur="bindblur"/>
</view>
事件觸發(fā):
<view class="content" style="color:blue">
{{log}}
</view>下面是JS代碼:: Page({
data:{
log:'事件觸發(fā)'
},
//行高改變時(shí)
bindlinechange:function(e){
var height=e.detail.height;
var heightRpx=e.detail.heightRpx;
var lineCount=e.detail.lineCount;
this.setData({
log:"height="+height+" | heightRpx="+heightRpx+" | lineCount="+lineCount
})
},
//文本失去焦點(diǎn)
bindblur:function(e){
var value=e.detail.value;
this.setData({
log:"bindblur失去改變.獲取textarea值="+value
})
},
//文本獲取焦點(diǎn)
bindfocus:function(e){
var value=e.detail.value;
this.setData({
log:"bindfocus獲取焦點(diǎn),獲取textarea值="+value
})
}
})下面是WXSS代碼:: .content{
border:1px black solid;
margin: 10px;
font-size: 10pt;
padding: 10px;
}
textarea{
border: 1px red solid;
margin: auto;
width:100%;
height: 3em;
margin-top:5px;
padding: 3px;
}
屬性解析: 下面是WXML代碼: <!--=======屬性=======--> <!--value:輸入框內(nèi)容--> <textarea value="內(nèi)容"/> <!--placeholder:占位符,對輸入框內(nèi)容提示--> <textarea placeholder="占位符" placeholder-class="占位符靜態(tài)樣式" placeholder-style="占位符動(dòng)態(tài)樣式"/> <!--disabled:控制標(biāo)簽有效,或者失效狀態(tài),在失效狀態(tài),不能獲取該值--> <textarea disabled="true"/> <textarea disabled/> 等同于 <textarea disabled="false"/> <!--maxlength:內(nèi)容長度限制,默認(rèn)140--> <textarea maxlength="100"/> <textarea maxlength/> 等同于 <textarea maxlength="140"/> <!--focus:初始化時(shí),獲取輸入焦點(diǎn)(目前開發(fā)工具暫不支持)--> <textarea focus="true"/> <textarea focus/> 等同于 <textarea focus="false"/> <!--auto-focus:當(dāng)界面只有一個(gè)textarea,自動(dòng)獲取焦點(diǎn)--> <textarea auto-focus="true"/> <textarea auto-focus/> 等同于 <textarea auto-focus="false"/> <!--auto-height:是否自動(dòng)增高,設(shè)置auto-height時(shí),style.height不生效--> <textarea auto-height="true"/> <textarea auto-height/> 等同于 <textarea auto-height="false"/> <!--=======事件=======--> <!--bindlinechange:輸入框行數(shù)變化時(shí)調(diào)用 返回參數(shù):height,heightRpx,lineCount--> <textarea bindlinechange="自己定義函數(shù)名"/> <!--bindfocus:當(dāng)獲取焦點(diǎn),可用輸入狀態(tài)時(shí)觸發(fā)--> <textarea bindfocus="自己定義函數(shù)名"/> <!--bindblur:當(dāng)失去焦點(diǎn)觸發(fā)--> 以上就是 微信小程序組件:textarea多行輸入框解讀和分析的詳細(xì)內(nèi)容,更多請關(guān)注php中文網(wǎng)其它相關(guān)文章! 小程序是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應(yīng)用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!