本文主要实现数据的分页加载效果视图及样式：<divclass"container"><divclass"topdiv"><div><listclass"listdiv"><blockfor"{{pagedatas}}"><listitemclass"listitemdiv"><text>{{$item}}<text><listitem><block><listitemclass"{{more'morediv1':'morediv'}}"disabled"{{more}}"onclick"loadmore"><text>{{text}}<text><listitem><list><div>.container{width:100%;height:1300px;display:flex;flexdirection:column;}.topdiv{...
2021-01-30 19:03:29 1.2w浏览 0点赞 1回复 0收藏
鸿蒙列表组件+可以实现页面的滚动列表，但对页面布局进一步优化时发现组件中css换行属性没有效果，且每一个宽度默认占据上层组件宽度的100%，无法调整；通过对模型驱动视图思想的思考，我们发现可以对数据结构进行优化实现鸿蒙列表的宫格布局效果效果图：视图及样式：<divclass"container"><listclass"listdiv"><blockfor"{{datas}}"><listitemclass"listitemdiv"><blockfor"{{$item}}"><divclass"boxdiv"><textclass"textdiv">...
2021-01-30 18:46:59 1.2w浏览 1点赞 2回复 1收藏
滚动选择器组件：效果图：视图及样式：<divclass"container"><divclass"contentdiv"><!picker组件:从底部弹起的滚动选择器><pickerclass"pickerdiv"type"text"range"{{areadatas}}"onchange"changearea">选择地区<picker><inputclass"inputdiv"type"text"value"{{area}}"placeholder"选择地区"><input><div><!多列选择器type"multitext"><divclass"contentdiv"><pickerclass"pickerdiv"type"multitext"range"{{areadatas2}}"onc...
2021-01-29 11:44:18 1.0w浏览 1点赞 3回复 0收藏
本文展示了通过和组件的搭配使用实现导航菜单的构建视图及样式：<divclass"container"><!左侧导航栏><divclass"leftdiv"><listclass"listdiv"><blockfor"{{leftmenus}}"><listitemclass"{{currentIndex$idx'listitem1':'listitem0'}}"onclick"onclick({{$idx}})"><textclass"{{currentIndex$idx'text1':'text0'}}">{{$item}}<text><listitem><block><list><div><!右侧内容区><divclass"rightdiv"><swiperid"swiperid"onchange"c...
2021-01-29 00:52:58 1.2w浏览 4点赞 2回复 0收藏
本文初步的实现了商品添加到购物车和跳转购物车页面时参数的传递效果图：视图及样式：<divclass"container"><listclass"listdiv"><blockfor"{{productlists}}"><listitemclass"listitem"><text>{{$item.pname}}<text><text>{{$item.price}}<text><imageclass"imgdiv"src"commonadd.png"onclick"addproduct({{$idx}})"><image><listitem><block><list><divclass"shopcardiv"><divclass"shopcar"onclick"showshopcar"><imageclass...
2021-01-28 01:59:56 1.5w浏览 1点赞 1回复 1收藏
本文主要描述了对列表数据的添加和删除视图及样式：<divclass"container"><listclass"listdiv"><blockfor"{{str}}"><listitemclass"listitem"><textclass"textdiv">{{$item}}<text><buttonclass"buttondiv"onclick"add">添加<button><buttonclass"buttondiv"onclick"del({{$idx}})">删除<button><listitem><block><list><!初始不显示，点击添加按钮时触发方法><dialogid"dialogid"class"dialogdiv"><divclass"dialog"><inputcla...
2021-01-28 01:47:03 1.3w浏览 2点赞 2回复 0收藏
本文主要描述对鸿蒙幻灯片组件、跑马灯组件、提示框、提示菜单、页面跳转以及对话框的应用幻灯片组件：视图及样式：<divclass"container"><divclass"c1"><!幻灯片组件><imageanimatorclass"imageanimator"duration"10s"fixedsize"false"images"{{imagesDatas}}"><imageanimator><div><div>.container{width:100%;height:1500px;display:flex;flexdirection:column;}.c1{width:100%;height:35%;}.imageanimator{width:100%;heigh...
2021-01-26 00:17:38 1.5w浏览 3点赞 1回复 0收藏
效果图：页面视图及样式：<divclass"container"><listclass"listdiv"><blockfor"{{musicDatas}}"><listitemgroupclass"listitemgroup"><listitem><textclass"t1">{{$item.leixing}}<text><listitem><listitem><text>{{$item.music}}<text><listitem><listitemgroup><block><list><div>.container{width:100%;height:1200px;}.listdiv{width:100%;height:100%;}.listitemgroup{width:100%;此处可通过不定义此模块高度来实现页面...
2021-01-24 21:15:34 1.2w浏览 4点赞 4回复 0收藏
效果图：页面视图及样式：<divclass"pagediv"><divclass"videodiv"><videoclass"v1"src"{{path}}"autoplay"true"controls"true"><video><div><!使用<tabs>组件定义滚动菜单栏><tabsclass"tabsdiv"vertical"false"onchange"changevideo"><tabbarclass"tabbar"><blockfor"{{video}}"><text>第{{$idx+1}}集<text><block><tabbar><!此处tabcontent中必须有内容，否则在点击播放其他video时会没有任何反映><tabcontent><blockfor"{{v...
2021-01-22 00:30:26 1.5w浏览 3点赞 1回复 1收藏
效果图：1、配置网络访问权限{"app":{"bundleName":"com.example.hmjs","vendor":"example","version":{"code":1,"name":"1.0"},"apiVersion":{"compatible":3,"target":4,"releaseType":"Beta1"}},"deviceConfig":{"default":{"network":{"usesCleartext":true,"securityConfig":{"domainSettings":{"cleartextPermitted":true,"domains":[{"subDomains":true,"name":"api.seniverse.com"}]}}}}},"module":{"reqPermissions":[...
2021-01-19 00:54:10 1.2w浏览 3点赞 2回复 2收藏
效果图：1.页面布局<divclass"pagediv"><!鸿蒙配置底部菜单栏,必须嵌套在父容器中><divclass"bottommenusdiv"><blockfor"{{menus}}"><divclass"menusdiv"onclick"onclickmenu({{$idx}})"><divclass"upmenusdiv"><imageclass"imgdiv"src"{{isonclick$idx$item.img1:$item.img2}}"><image><div><divclass"downmenusdiv"><textclass"{{isonclick$idx'texton':'textoff'}}">{{$item.text}}<text><div><div><block><div><div>2.csss...
2021-01-13 21:53:34 1.2w浏览 1点赞 1回复 0收藏
1、在date中定义数据模型data:{title:"我是一个标题",arrs:["text1","text2","text3","text4","text5","text6","text7","text8","text9"],text1:"鸿蒙",text2:"页面",text3:"布局"}2、使用标签，对页面进行布局<divclass"pagediv"><divclass"topdiv"><textclass"textdiv">{{title}}<text><div><divclass"middlediv"><blockfor"{{arrs}}"><divclass"box"><textclass"boxtxt">{{$item}}<text><div><block><div><divclass"buttomdi...
2021-01-12 17:47:37 1.6w浏览 3点赞 1回复 0收藏
