回复
添加资源
添加资源将有机会获得更多曝光，你也可以直接关联已上传资源
去关联
HarmonyOS 应用开发在线体验- lianxiren 原创
鸿蒙时代
发布于 2021-8-13 10:25
浏览
0收藏
一、技术相关
使用语言: 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>
</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;
}
}
.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;
}
.content {
color:#ffffff;
}
}
@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;
}
.content {
color: #b4b4b4;
}
}
.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;
}
}
@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;
}
.detail-image {
height: 100px;
width: 100px;
}
.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%;
}
}
.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.就是js最后两段代码是有固定格式还是有方法技巧的？
©著作权归作者所有，如需转载，请注明出处，否则将追究法律责任
标签
HarmonyOS 应用开发在线体验- lianxiren.docx 219.03K 4次下载
赞
收藏
回复
举报
相关推荐
