HarmonyOS 应用开发在线体验

使用语言: Js

体验内容： lianxiren

工具：在线开发

https://playground.harmonyos.com/#/cn/onlineDemo?ha_source=harmonyos&ha_sourceid=9011

Html

{{$item.name}} {{$item.phone}} {{detailObj.name}} phone : {{detailObj.phone}} 名字 电话 取消 确认

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;}Jsconst 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: "" },}相关可以讨论的问题手机跳出的二级页面点取消就不会保存修改的信息，点确认就会保存，还有怎么关掉这个页面，实现这些的代码在哪里或者是怎么实现的？电视点击小图但右边的大图也会更新，实现这个逻辑的代码在哪？就是js最后两段代码是有固定格式还是有方法技巧的？

花粉社群VIP加油站