HarmonyOS应用开发在线体验-lianxiren

1、HarmonyOS 应用开发在线体验- lianxiren技术相关使用语言: Js体验内容： lianxiren工具：在线开发 HYPERLINK /#/cn/onlineDemo?ha_source=harmonyos&ha_sourceid=9011 /#/cn/onlineDemo?ha_source=harmonyos&ha_sourceid=9011展示效果与代码理解Html用来返回方法的元素并进行绑定头像$item.phone名字和电话手机右边的箭头detailOphone:detailObj.phone电视右半边的内容名字电话取消确认手机点击跳出来的二级页面Css.contain

2、erdisplay:flex;flex-direction:row;justify-content:flex-start;.listmargin-right:14px;width:100%;.contentdisplay:flex;flex-direction:column;justify-content:center;flex:1;overflow:hidden;.flex-rowdisplay:flex;flex-direction:row;align-items:center;width:200px;mediascreenand(device-type:tv).listwidth:50%

3、;padding-right:24px;padding-left:24px;.list-itemheight:64px;margin:014px;display:flex;flex-direction:row;align-items:center;mediascreenand(device-type:wearable).list-itemheight:80px;.contentcolor:#ffffff;mediascreenand(device-type:tv).list-itemheight:64px;border-radius:8px;padding-left:24px;backgrou

4、nd-color:#2c2c2c;display:flex;flex-direction:row;align-items:center;margin:5px0;.contentcolor:#b4b4b4;.list-imageheight:46px;width:46px;.list-textmargin-left:16px;font-size:14px;white-space:nowrap;规定名字和手机号码不进行换行text-overflow:ellipsis;如果一行满了，后面的显示省略符号overflow:hidden;如果超出限制的宽度，则超出了的内容会被隐藏flex:1;.detai

5、l-containerwidth:0;height:0;overflow:hidden;color:#b4b4b4;.right-imagewidth:0px;height:0px;mediascreenand(device-type:phone).right-imagewidth:30px;height:30px;mediascreenand(device-type:tv).detail-containerposition:absolute;right:14px;top:50%;width:50%;height:100%;transform:translateY(-50%);display:

6、flex;flex-direction:column;justify-content:center;align-items:center;.detail-imageheight:100px;width:100px;.detail-name,.detail-phonemargin-top:12px;font-size:20px;white-space:nowrap;text-overflow:ellipsis;text-align:center;max-height:2rem;overflow:hidden;width:100%;.dialog-divwidth:280px;background

7、-color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:space-between;.input-boxdisplay:flex;flex-direction:column;align-items:center;justify-content:center;padding:050px;.inner-btnwidth:200px;height:40px;margin-top:10px;display:flex;justify-content:space-around;align-items

8、:center;.btnfont-size:15px;background:none;border:none;color:#1460f7;.labelwidth:40px;font-size:16px;.inputfont-size:16px;line-height:32px;width:160px;border:none;border-bottom:1pxsolid#c8c8c8;.avatarwidth:150px;height:150px;margin:20px;JsconstHEAD_IMAGE=/common/head0.png,/common/head1.png,/common/h

9、ead2.png,/common/head3.png,/common/head4.png;exportdefault/数据字段定义contactList:image:HEAD_IMAGE0,name:Alan,phone0对应第一张图片即上述HEAD-IAMGE的第一张png头像，依此类推，下面的也一样。image:HEAD_IMAGE2,name:Bob,phoneimage:HEAD_IMAGE3,name:Carl,phoneimage:HEAD_IMAGE4,name:David,phone:1987

10、6543210,image:HEAD_IMAGE0,name:Alan,phoneimage:HEAD_IMAGE1,name:Bob,phoneimage:HEAD_IMAGE2,name:Carl,phone:12345678910,image:HEAD_IMAGE3,name:David,phone:19876543210,image:HEAD_IMAGE4,name:Alan,phoneimage:HEAD_IMAGE0,name:Bob,phoneimage:HEAD_IM

11、AGE1,name:Carl,phone:12345678910,image:HEAD_IMAGE2,name:David,phone:19876543210,image:HEAD_IMAGE3,name:Alan,phoneimage:HEAD_IMAGE4,name:Bob,phoneimage:HEAD_IMAGE0,name:Carl,phone:12345678910,image:HEAD_IMAGE1,name:David,phone:19876543210,/只做数据字段定义isPhoneDevice:false,name:,phone:,用来刚开始那个手机