鴻蒙HarmonyOS兼容JS的類Web開(kāi)發(fā)-開(kāi)發(fā)指導(dǎo)
常用組件開(kāi)發(fā)指導(dǎo)
list開(kāi)發(fā)指導(dǎo)
list是用來(lái)顯示列表的組件，包含一系列相同寬度的列表項(xiàng)，適合連續(xù)、多行地呈現(xiàn)同類數(shù)據(jù)。具體用法請(qǐng)參考list API。
創(chuàng)建list組件
在pages/index目錄下的hml文件中創(chuàng)建一個(gè)list組件。
<!-- xxx.hml -->
<div class="container">
<list>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
</list>
</div>
/* xxx.css */
.container {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
background-color: #F1F3F5;
}
.listItem{
height: 20%;
background-color:#d2e0e0;
margin-top: 20px;
}
說(shuō)明
- 是的子組件，實(shí)現(xiàn)列表分組功能，不能再嵌套，可以嵌套。
- 是的子組件，展示列表的具體項(xiàng)。
添加滾動(dòng)條
設(shè)置scrollbar屬性為on即可在屏幕右側(cè)生成滾動(dòng)條，實(shí)現(xiàn)長(zhǎng)列表或者屏幕滾動(dòng)等效果。
<!-- xxx.hml -->
<div class="container">
<list class="listCss" scrollbar="on" >
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
<list-item class="listItem"></list-item>
</list>
</div>
/* xxx.css */
.container {
flex-direction: column;
background-color: #F1F3F5;
}
.listItem{
height: 20%;
background-color:#d2e0e0;
margin-top: 20px;
}
.listCss{
height: 100%;
scrollbar-color: #8e8b8b;
scrollbar-width: 50px;
}
添加側(cè)邊索引欄
設(shè)置indexer屬性為自定義索引時(shí)，索引欄會(huì)顯示在列表右邊界處，indexer屬性設(shè)置為true,默認(rèn)為字母索引表。
<!-- xxx.hml -->
<div class="container">
<list class="listCss" indexer="{
{['#','1','2','3','4','5','6','7','8']}}" >
<list-item class="listItem" section="#" ></list-item>
</list>
</div>
/* xxx.css */
.container{
flex-direction: column;
background-color: #F1F3F5;
}
.listCss{
height: 100%;
flex-direction: column;
columns: 1
}
說(shuō)明
- indexer屬性生效需要flex-direction屬性配合設(shè)置為column，且columns屬性設(shè)置為1。
- indexer可以自定義索引表，自定義時(shí)"#"必須要存在。
實(shí)現(xiàn)列表折疊和展開(kāi)
為list組件添加groupcollapse和groupexpand事件實(shí)現(xiàn)列表的折疊和展開(kāi)。
<!-- xxx.hml -->
<div class="doc-page">
<list style="width: 100%;" id="mylist">
<list-item-group for="listgroup in list" id="{
{listgroup.value}}" ongroupcollapse="collapse" ongroupexpand="expand">
<list-item type="item" style="background-color:#FFF0F5;height:95px;">
<div class="item-group-child">
<text>One---{
{listgroup.value}}</text>
</div>
</list-item>
<list-item type="item" style="background-color: #87CEFA;height:145px;" primary="true">
<div class="item-group-child">
<text>Primary---{
{listgroup.value}}</text>
</div>
</list-item>
</list-item-group>
</list>
</div>
/* xxx.css */
.doc-page {
flex-direction: column;
background-color: #F1F3F5;
}
list-item{
margin-top:30px;
}
.top-list-item {
width:100%;
background-color:#D4F2E7;
}
.item-group-child {
justify-content: center;
align-items: center;
width:100%;
}
// xxx.js
import promptAction from '@ohos.promptAction';
export default {
data: {
direction: 'column',
list: []
},
onInit() {
this.list = []
this.listAdd = []
for (var i = 1; i <= 2; i++) {
var dataItem = {
value: 'GROUP' + i,
};
this.list.push(dataItem);
}
},
collapse(e) {
promptAction.showToast({
message: 'Close ' + e.groupid
})
},
expand(e) {
promptAction.showToast({
message: 'Open ' + e.groupid
})
}
}
說(shuō)明
- groupcollapse和groupexpand事件僅支持list-item-group組件使用。
場(chǎng)景示例
在本場(chǎng)景中，開(kāi)發(fā)者可以根據(jù)字母索引表查找對(duì)應(yīng)聯(lián)系人。
<!-- xxx.hml -->
<div class="doc-page">
<text style="font-size: 35px; font-weight: 500; text-align: center; margin-top: 20px; margin-bottom: 20px;">
<span>Contacts</span>
</text>
<list class="list" indexer="true">
<list-item class="item" for="{
{namelist}}" type="{
{$item.section}}" section="{
{$item.section}}">
<div class="container">
<div class="in-container">
<text class="name">{
{$item.name}}</text>
<text class="number">18888888888</text>
</div>
</div>
</list-item>
<list-item type="end" class="item">
<div style="align-items:center;justify-content:center;width:750px;">
<text style="text-align: center;">Total: 10</text>
</div>
</list-item>
</list>
</div>
/* xxx.css */
.doc-page {
width: 100%;
height: 100%;
flex-direction: column;
background-color: #F1F3F5;
}
.list {
width: 100%;
height: 90%;
flex-grow: 1;
}
.item {
height: 120px;
padding-left: 10%;
border-top: 1px solid #dcdcdc;
}
.name {
color: #000000;
font-size: 39px;
}
.number {
color: black;
font-size: 25px;
}
.container {
flex-direction: row;
align-items: center;
}
.in-container {
flex-direction: column;
justify-content: space-around;
}
// xxx.js
export default {
data: {
namelist:[{
name: 'Zoey',
section:'Z'
},{
name: 'Quin',
section:'Q'
},{
name:'Sam',
section:'S'
},{
name:'Leo',
section:'L'
},{
name:'Zach',
section:'Z'
},{
name:'Wade',
section:'W'
},{
name:'Zoe',
section:'Z'
},{
name:'Warren',
section:'W'
},{
name:'Kyle',
section:'K'
},{
name:'Zaneta',
section:'Z'
}]
},
onInit() {
}
}
dialog開(kāi)發(fā)指導(dǎo)
dialog組件用于創(chuàng)建自定義彈窗，通常用來(lái)展示用戶當(dāng)前需要或用戶必須關(guān)注的信息或操作。具體用法請(qǐng)參考dialog API。
創(chuàng)建dialog組件
在pages/index目錄下的hml文件中創(chuàng)建一個(gè)dialog組件，并添加Button組件來(lái)觸發(fā)dialog。dialog組件僅支持width、height、margin、margin-[left|top|right|bottom]、margin-[start|end]樣式。
<!-- xxx.hml -->
<div class="doc-page">
<dialog class="dialogClass" id="dialogId" dragable="true">
<div class="content">
<text>this is a dialog</text>
</div>
</dialog>
<button value="click me" onclick="opendialog"></button>
</div>
/* xxx.css */
.doc-page {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
.dialogClass{
width: 80%;
height: 250px;
margin-start: 1%;
}
.content{
width: 100%;
height: 250px;
justify-content: center;
background-color: #e8ebec;
border-radius: 20px;
}
text{
width: 100%;
height: 100%;
text-align: center;
}
button{
width: 70%;
height: 60px;
}
// xxx.js
export default {
//Touch to open the dialog box.
opendialog(){
this.$element('dialogId').show()
},
}
設(shè)置彈窗響應(yīng)
開(kāi)發(fā)者點(diǎn)擊頁(yè)面上非dialog的區(qū)域時(shí)，將觸發(fā)cancel事件而關(guān)閉彈窗。同時(shí)也可以通過(guò)對(duì)dialog添加show和close方法來(lái)顯示和關(guān)閉彈窗。
<!-- xxx.hml -->
<div class="doc-page">
<dialog class="dialogClass" id="dialogId" oncancel="canceldialog">
<div class="dialogDiv">
<text>dialog</text>
<button value="confirm" onclick="confirmClick"></button>
</div>
</dialog>
<button value="click me" onclick="opendialog"></button>
</div>
/* xxx.css */
.doc-page {
width:100%;
height:100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
.dialogClass{
width: 80%;
height: 300px;
margin-start: 1%;
}
.dialogDiv{
width: 100%;
flex-direction: column;
justify-content: center;
align-self: center;
}
text{
height: 100px;
align-self: center;
}
button{
align-self: center;
margin-top: 20px;
width: 60%;
height: 80px;
}
// xxx.js
import promptAction from '@ohos.promptAction';
export default {
canceldialog(e){
promptAction.showToast({
message: 'dialogCancel'
})
},
opendialog(){
this.$element('dialogId').show()
promptAction.showToast({
message: 'dialogShow'
})
},
confirmClick(e) {
this.$element('dialogId').close()
promptAction.showToast({
message: 'dialogClose'
})
},
}
說(shuō)明
- 僅支持單個(gè)子組件。
- dialog屬性、樣式均不支持動(dòng)態(tài)更新。
- dialog組件不支持focusable、click-effect屬性。
場(chǎng)景示例
在本場(chǎng)景中，開(kāi)發(fā)者可以通過(guò)dialog組件實(shí)現(xiàn)一個(gè)日程表。彈窗在打開(kāi)狀態(tài)下，利用Textarea組件輸入當(dāng)前日程，點(diǎn)擊確認(rèn)按鈕后獲取當(dāng)前時(shí)間并保存輸入文本。最后以列表形式將各日程進(jìn)行展示。
<!-- xxx.hml -->
<div class="doc-page">
<text style="margin-top: 60px;margin-left: 30px;">
<span>{
{date}} events</span>
</text>
<div class="btndiv">
<button type="circle" class="btn" onclick="addschedule">+</button>
</div>
<!-- for Render events data -->
<list style="width: 100%;">
<list-item type="item" for="schedulelist" style="width:100%;height: 200px;">
<div class="schedulediv">
<text class="text1">{
{date}} event</text>
<text class="text2">{
{$item.schedule}}</text>
</div>
</list-item>
</list>
<dialog id="datedialog" oncancel="canceldialog" >
<div class="dialogdiv">
<div class="innertxt">
<text class="text3">{
{date}}</text>
<text class="text4">New event</text>
</div>
<textarea placeholder="Event information" onchange="getschedule" class="area" extend="true"></textarea>
<div class="innerbtn">
<button type="text" value="Cancel" onclick="cancelschedule" class="btntxt"></button>
<button type="text" value="OK" onclick="setschedule" class="btntxt"></button>
</div>
</div>
</dialog>
</div>
/* xxx.css */
.doc-page {
flex-direction: column;
background-color: #F1F3F5;
}
.btndiv {
width: 100%;
height: 200px;
flex-direction: column;
align-items: center;
justify-content: center;
}
.btn {
radius:60px;
font-size: 100px;
background-color: #1E90FF;
}
.schedulediv {
width: 100%;
height: 200px;
flex-direction: column;
justify-content: space-around;
padding-left: 55px;
}
.text1 {
color: #000000;
font-weight: bold;
font-size: 39px;
}
.text2 {
color: #a9a9a9;
font-size: 30px;
}
.dialogdiv {
flex-direction: column;
align-items: center;
}
.innertxt {
width: 320px;
height: 160px;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
.text3 {
font-family: serif;
color: #1E90FF;
font-size: 38px;
}
.text4 {
color: #a9a9a9;
font-size: 33px;
}
.area {
width: 320px;
border-bottom: 1px solid #1E90FF;
}
.innerbtn {
width: 320px;
height: 120px;
justify-content: space-around;
}
.btntxt {
text-color: #1E90FF;
}
// xxx.js
var info = null;
import promptAction from '@ohos.promptAction';
export default {
data: {
curYear:'',
curMonth:'',
curDay:'',
date:'',
schedule:'',
schedulelist:[]
},
onInit() {
// Obtain the current date.
var date = new Date();
this.curYear = date.getFullYear();
this.curMonth = date.getMonth() + 1;
this.curDay = date.getDate();
this.date = this.curYear + '-' + this.curMonth + '-' + this.curDay;
this.schedulelist = []
},
addschedule(e) {
this.$element('datedialog').show()
},
canceldialog(e) {
promptAction.showToast({
message: 'Event setting canceled.'
})
},
getschedule(e) {
info = e.value
},
cancelschedule(e) {
this.$element('datedialog').close()
promptAction.showToast({
message: 'Event setting canceled.'
})
},
// Touch OK to save the data.
setschedule(e) {
if (e.text === '') {
this.schedule = info
} else {
this.schedule = info
var addItem = {schedule: this.schedule,}
this.schedulelist.push(addItem)
}
this.$element('datedialog').close()
}
}
form開(kāi)發(fā)指導(dǎo)
form是一個(gè)表單容器，支持容器內(nèi)Input組件內(nèi)容的提交和重置。具體用法請(qǐng)參考form API。
說(shuō)明
從 API Version 6 開(kāi)始支持。
創(chuàng)建form組件
在pages/index目錄下的hml文件中創(chuàng)建一個(gè)form組件。
<!-- xxx.hml -->
<div class="container">
<form style="width: 100%; height: 20%">
<input type="text" style="width:80%"></input>
</form>
</div>
/* xxx.css */
.container {
width:100%;
height:100%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #F1F3F5;
}
實(shí)現(xiàn)表單縮放
為form組件添加click-effect屬性，實(shí)現(xiàn)點(diǎn)擊表單后的縮放效果，click-effect枚舉值請(qǐng)參考通用屬性。
<!-- xxx.hml -->
<div class="container">
<form id="formId" class="formClass" click-effect="spring-large">
<input type="text"></input>
</form>
</div>
設(shè)置form樣式
通過(guò)為form添加background-color和border屬性，來(lái)設(shè)置表單的背景顏色和邊框。
/* xxx.css */
.container {
width: 100%;
height: 100%;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #F1F3F5;
}
.formClass{
width: 80%;
height: 100px;
padding: 10px;
border: 1px solid #cccccc;
}
添加響應(yīng)事件
為form組件添加submit和reset事件，來(lái)提交表單內(nèi)容或重置表單選項(xiàng)。
<!-- xxx.hml -->
<div class="container">
<form onsubmit='onSubmit' onreset='onReset' class="form">
<div style="width: 100%;justify-content: center;">
<label>Option 1</label>
<input type='radio' name='radioGroup' value='radio1'></input>
<label>Option 2</label>
<input type='radio' name='radioGroup' value='radio2'></input>
</div>
<div style="width: 100%;justify-content: center; margin-top: 20px">
<input type="submit" value="Submit" style="width:120px; margin-right:20px;" >
</input>
<input type="reset" value="Reset" style="width:120px;"></input>
</div>
</form>
</div>
/* index.css */
.container{
width: 100%;
height: 100%;
flex-direction: column;
justify-items: center;
align-items: center;
background-color: #F1F3F5;
}
.form{
width: 100%;
height: 30%;
margin-top: 40%;
flex-direction: column;
justify-items: center;
align-items: center;
}
// xxx.js
import promptAction from '@ohos.promptAction';
export default{
onSubmit(result) {
promptAction.showToast({
message: result.value.radioGroup
})
},
onReset() {
promptAction.showToast({
message: 'Reset All'
})
}
}
場(chǎng)景示例
在本場(chǎng)景中，開(kāi)發(fā)者可以選擇相應(yīng)選項(xiàng)并提交或重置數(shù)據(jù)。文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-785026.html
創(chuàng)建Input組件，分別設(shè)置type屬性為checkbox（多選框）和radio（單選框），再使用form組件的onsubmit和onreset事件實(shí)現(xiàn)表單數(shù)據(jù)的提交與重置。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-785026.html
<!-- xxx.hml -->
<div class="container">
<form onsubmit="formSubmit" onreset="formReset">
<text style="font-size: 30px; margin-bottom: 20px; margin-top: 100px;">
<span > Form </span>
</text>
<div style="flex-direction: column;width: 90%;padding: 30px 0px;">
<text class="txt">Select 1 or more options</text>
<div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;">
<label target="checkbox1">Option 1</label>
<input id="checkbox1" type="checkbox" name="checkbox1"></input>
<label target="checkbox2">Option 2</label>
<input id="checkbox2" type="checkbox" name="checkbox2"></input>
</div>
<divider style="margin: 20px 0px;color: pink;height: 5px;"></divider>
<text class="txt">Select 1 option</text>
<div style="width: 90%;height: 150px;align-items: center;justify-content: space-around;">
<label target="radio1">Option 1</label>
<input id="radio1" type="radio" name="myradio"></input>
<label target="radio2">Option 2</label>
<input id="radio2" type="radio" name="myradio"></input>
</div>
<divider style="margin: 20px 0px;color: pink;height: 5px;"></divider>
<text class="txt">Text box</text>
<input type="text" placeholder="Enter content." style="margin-top: 50px;"></input>
<div style="width: 90%;align-items: center;justify-content: space-between;margin: 40px;">
<input type="submit">Submit</input>
<input type="reset">Reset</input>
</div>
</div>
</form>到了這里，關(guān)于鴻蒙HarmonyOS兼容JS的類Web開(kāi)發(fā)-開(kāi)發(fā)指導(dǎo)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
