从微信小程序到鸿蒙JS开发【02】-数据绑定&tabBar&swiper

想了解更多内容，从微程序请访问：

和华为官方合作共建的到鸿定鸿蒙技术社区

https://harmonyos.51cto.com/#zz

1、鸿蒙的发数数据绑定

微信小程序的数据绑定是类似于Vue的，wxml文件用 { { }} 和对应js文件中的据绑data对象中的属性进行绑定。

     { {  now.location.name }}市  

data: {      now: {        location: {          name: "南京"       },从微程序   } } 

  

那么鸿蒙中是否也是这样绑定呢?尝试在hml文件的div标签中使用 { { }} 绑定js文件中的属性值，但却什么都没有显示。到鸿定

<!--错误代码--> <div class="container">     <div class="top">         <div class="topItem">             { { t1}}         </div>         <div class="topItem">             { { t2}}         </div>         <div class="topItem">             { { t3}}         </div>     </div> ... </div>  export default {      data: {          t1: "吃饭",发数         t2: "睡觉",         t3: "打豆豆"     } } 

 

其实是因为div标签中直接放文字是不会显示的，需要将文字放在标签中才会显示出来。据绑将hml文件做些更改，从微程序可以看到数据已被绑定到页面中了。到鸿定

<div class="container">     <div class="top">         <div class="topItem">             <text>                 { { t1}}             </text>         </div>         <div class="topItem">             <text>                 { { t2}}             </text>         </div>         <div class="topItem">             <text>                 { { t3}}             </text>         </div>     </div> ... </div> 

在一个数组中循环取值的发数方式和微信小程序也是类似的，可用一个标签作为逻辑控制块，据绑其属性有for和if。从微程序需注意循环的到鸿定每一项索引为$idx，值为$item。发数需要使用$去引用，源码下载且没有类似于wx:for-item等属性去改变变量名。若要重命名，可写为for="{ { (index, value) in ... }}

<div class="content">     <div class="contentItem">         <block for="{ { array}}">             <div class="item">                 <text>{ { $idx}}: { { $item}}</text>             </div>         </block>     </div> </div>  export default {      data: {          t1: "吃饭",         t2: "睡觉",         t3: "打豆豆",         array: [1, 3, 5, 7, 9, 2, 4, 6, 8]     } } 

2、自定义tabBar

在微信小程序中可以直接在app.json中定义一个tabBar。

"tabBar": {      "color": "#333333",     "backgroundColor": "#fdfdfd",     "selectedColor": "#E20A0B",     "list": [       {          "pagePath": "pages/weather/weather",         "text": "天气",         "iconPath": "icon/weather.png",         "selectedIconPath": "icon/weather1.png"       },     ...     ] } 

 

鸿蒙没有这种在json中继承的配置项，但我们可以用flex布局自己写一个，甚至可以加上动画等更丰富的功能。考虑到每一个菜单项有选中和未选中两种状态，各需准备两张图片。将图片放在/entry/src/main/js/default/common文件夹中，并在js文件中定义菜单栏数据。此处需要注意虽然在目录结构上common文件夹和页面js文件存在父级目录的关系，但在js加载时common被认定为同一级目录，图片目录定义处需注意。

export default {      data: {          tabBar: [             {                  text: "天气",                 img1: "./common/icon/weather.png",                 img2: "./common/icon/weather1.png"             },             {                  text: "每日新闻",                 img1: "./common/icon/news.png",                 img2: "./common/icon/news1.png"             },             {                  text: "本地新闻",                 img1: "./common/icon/local.png",                 img2: "./common/icon/local1.png"             },             {                  text: "查询",                 img1: "./common/icon/search2.png",                 img2: "./common/icon/search1.png"             }         ],         barIdx: 0,     } } 

 

页面设计上，采用position: fixed;将菜单栏固定在页面底部，并结合flex布局使页面美观。判断当前选中哪一项，则可以使用三元表达式。

                                                                                                                                                  { {  $item.text }}                                                                  

/*底部菜单*/ .tabBar {      width: 100%;     height: 170px;     position: fixed;     bottom: 0px;     border-top: 1px solid #444444;     display: flex;     justify-content: space-around;     align-items: center;     background-color: #f5f5f5; } .cell {      width: 20%;     height: 160px;     display: flex;     flex-direction: column; } .image {      width: 100%;     height: 110px;     display: flex;     justify-content: center;     align-items: center; } .image>image {      width: 90px;     height: 90px; } .a {      color: #0074DD; } .b {      color: #333333; } .text {      width: 100%;     height: 50px;     display: flex;     justify-content: center;     align-items: center; } .text>text {      font-size: 35px; } 

div的点击事件处理属性为onclick，其不会像微信小程序一样自动传入一个事件对象，而需要我们自行定义传入的参数。如上的onclick="changeMenu($idx)"就是鸿蒙传入点击事件的方法。这个函数只需要改变barIdx的值便可以实现点击切换tabBar对应项的网站模板颜色和图片，达到“四两拨千斤”的效果。

changeMenu(idx) {          this.barIdx = idx; } 

 这里又出现了和微信小程序的不同处，微信小程序改变data中的值需要使用wx.setData()函数进行设置，而鸿蒙中直接使用this.key = value即可。

点一下其他菜单项：

 

3、结合swiper进行翻页

tabBar完成了，但这个菜单栏是写在一个页面中的，要怎样进行翻页呢?有一个在一个js页面中实现“翻页”的方式，就是结合swiper。和微信小程序中的swiper组件一样，它是一个可滑动的组件，多用于轮播图、滚动通知等。

鸿蒙的swiper需要定义一个页面唯一的id属性，用于点击事件联动页面滑动。index属性为当前的索引值。

/*划页swiper*/ .pager {      width: 100%;     height: 100%; } .pager>div {      display: flex;     flex-direction: column; } 

 现需要实现两个功能，滑动swiper实现tabBar联动样式变化，以及点击tabBar中的服务器托管项联动swiper页面滑动。更改changeMenu方法：

changeMenu(idx) {      this.barIdx = idx;     this.$element("pager").swipeTo({          index: idx     }); } 

 鸿蒙通过this.$element(id)找到页面中对应id的组件，如为swiper组件则可使用swipeTo()方法实现滑动，其index属性则为滑动到的页面索引值(0开始)。

changePage方法，只需要改变barIdx的值即可。通过swiper的onchange属性绑定方法名，滑动到的index的值会作为event.index被传入。

changePage(event) {      this.barIdx = event.index; } 

 大功告成。

©著作权归作者和HarmonyOS技术社区共同所有，如需转载，请注明出处，否则将追究法律责任。

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com/#zz

很赞哦!（162）