
HarmonyOS 应用开发在线体验- lianxiren 原创
一、技术相关
使用语言: Js
体验内容: lianxiren
工具:在线开发
https://playground.harmonyos.com/#/cn/onlineDemo?ha_source=harmonyos&ha_sourceid=9011
二、展示效果与代码理解
Html
<div class=“container”>
<list class="list">
<list-item for="{{contactList}}" class="list-item" onfocus="listFocus({{$idx}})"
onclick="clickItem({{$idx}})">
<image src="{{$item.image}}" class="list-image"></image>
<div class="content">
<text class="list-text">
{{$item.name}}
</text>
<text class="list-text" focusable="true">
{{$item.phone}}
</text>
</div>
<image class="right-image" src="/common/right.png">
</image>
</list-item>
</list>
<div class="detail-container">
<image class="detail-image" src="{{detailObj.image}}">
</image>
<text class="detail-name">
{{detailObj.name}}
</text>
<text class="detail-phone">
phone : {{detailObj.phone}}
</text>
</div>
<dialog id="detailDialog" class="dialog-main" if="{{isPhoneDevice}}" @cancel="dialogCancel">
<div class="dialog-div">
<image src="{{detailObj.image}}" class="avatar"></image>
<div class="input-box">
<div class="flex-row">
<label class="label" target="name">名字</label>
<input id="name" class="input" type="text" value="{{name}}" @change="changeName">
</input>
</div>
<div class="flex-row">
<label class="label" target="phone">电话</label>
<input id="phone" class="input" type="text" value="{{phone}}" @change="changePhone">
</input>
</div>
</div>
<div class="inner-btn">
<button class="btn" type="text" onclick="cancel">取消</button>
<button class="btn" type="text" onclick="confirm">确认</button>
</div>
</div>
</dialog>
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
</div>
Css
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.list {
margin-right: 14px;
width: 100%;
}
.content {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
overflow: hidden;
}
.flex-row {
display: flex;
flex-direction: row;
align-items: center;
width: 200px;
}
@media screen and (device-type: tv) {
.list {
width: 50%;
padding-right: 24px;
padding-left: 24px;
- 1.
- 2.
- 3.
- 4.
- 5.
}
}
.list-item {
height: 64px;
margin: 0 14px;
display: flex;
flex-direction: row;
align-items: center;
}
@media screen and (device-type: wearable) {
.list-item {
height: 80px;
- 1.
}
.content {
color:#ffffff;
- 1.
}
}
@media screen and (device-type: tv) {
.list-item {
height: 64px;
border-radius: 8px;
padding-left: 24px;
background-color: #2c2c2c;
display: flex;
flex-direction: row;
align-items: center;
margin: 5px 0;
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
}
.content {
color: #b4b4b4;
- 1.
}
}
.list-image {
height: 46px;
width: 46px;
}
.list-text {
margin-left: 16px;
font-size: 14px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
flex: 1;
}
.detail-container {
width: 0;
height: 0;
overflow: hidden;
color: #b4b4b4;
}
.right-image {
width: 0px;
height: 0px;
}
@media screen and (device-type: phone) {
.right-image {
width: 30px;
height: 30px;
- 1.
- 2.
- 3.
}
}
@media screen and (device-type: tv) {
.detail-container {
position: absolute;
right: 14px;
top: 50%;
width: 50%;
height: 100%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
}
.detail-image {
height: 100px;
width: 100px;
- 1.
- 2.
- 3.
}
.detail-name,
.detail-phone {
margin-top: 12px;
font-size: 20px;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
max-height: 2rem;
overflow: hidden;
width: 100%;
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
}
}
.dialog-div {
width: 280px;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.input-box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 50px;
}
.inner-btn {
width: 200px;
height: 40px;
margin-top: 10px;
display: flex;
justify-content: space-around;
align-items: center;
}
.btn {
font-size: 15px;
background: none;
border: none;
color: #1460f7;
}
.label {
width: 40px;
font-size: 16px;
}
.input {
font-size: 16px;
line-height: 32px;
width: 160px;
border: none;
border-bottom: 1px solid #c8c8c8;
}
.avatar {
width: 150px;
height: 150px;
margin: 20px;
}
Js
const HEAD_IMAGE = [“/common/head0.png”, “/common/head1.png”, “/common/head2.png”, “/common/head3.png”, “/common/head4.png”];
export default {
//数据字段定义
contactList: [
{
image: HEAD_IMAGE[0],
name: "Alan",
phone: "020-00000000"
},
{
image: HEAD_IMAGE[2],
name: "Bob",
phone: "020-11111111"
},
{
image: HEAD_IMAGE[3],
name: "Carl",
phone: "0755-33333333"
},
{
image: HEAD_IMAGE[4],
name: "David",
phone: "19876543210"
},
{
image: HEAD_IMAGE[0],
name: "Alan",
phone: "020-00000000"
},
{
image: HEAD_IMAGE[1],
name: "Bob",
phone: "020-11111111"
},
{
image: HEAD_IMAGE[2],
name: "Carl",
phone: "12345678910"
},
{
image: HEAD_IMAGE[3],
name: "David",
phone: "19876543210"
},
{
image: HEAD_IMAGE[4],
name: "Alan",
phone: "020-00000000"
},
{
image: HEAD_IMAGE[0],
name: "Bob",
phone: "020-11111111"
},
{
image: HEAD_IMAGE[1],
name: "Carl",
phone: "12345678910"
},
{
image: HEAD_IMAGE[2],
name: "David",
phone: "19876543210"
},
{
image: HEAD_IMAGE[3],
name: "Alan",
phone: "020-00000000"
},
{
image: HEAD_IMAGE[4],
name: "Bob",
phone: "020-11111111"
},
{
image: HEAD_IMAGE[0],
name: "Carl",
phone: "12345678910"
},
{
image: HEAD_IMAGE[1],
name: "David",
phone: "19876543210"
}
],
//只做数据字段定义
isPhoneDevice: false,
name: "",
phone: "",
detailObj: {
image: "",
name: "",
phone: ""
},
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173.
- 174.
- 175.
- 176.
- 177.
- 178.
- 179.
- 180.
- 181.
- 182.
- 183.
}
三、相关可以讨论的问题
1.手机跳出的二级页面点取消就不会保存修改的信息,点确认就会保存,还有怎么关掉这个页面,实现这些的代码在哪里或者是怎么实现的?
2.电视点击小图但右边的大图也会更新,实现这个逻辑的代码在哪?
3.就是js最后两段代码是有固定格式还是有方法技巧的?
