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

时间：2023-03-12 21:54:18 科技观察

更多内容请访问：与华为官方共建的鸿蒙技术社区https://harmonyos.51cto。com/#zz1、鸿蒙的数据绑定微信小程序的数据绑定类似于Vue，wxml文件绑定{{}}和对应js文件中数据对象中的属性。{{now.location.name}}citydata:{now:{location:{name:"南京"},}}这个也是在鸿蒙绑定的吗？尝试在html文件的div标签中使用{{}}绑定js文件中的属性值，但是没有任何显示。{{t1}}

...exportdefault{data:{t1:"吃",t2:"睡",t3:"打豆豆"}}其实是因为直接放在div标签中的文字是不会显示的，需要将文字放在标签中才能显示。对html文件做一些修改，可以看到数据已经绑定到页面上了。{{t1}}{{t2}}{{t3}}...循环数组中的值方法与微信小程序类似。标签可以作为逻辑控制块，其属性包括for和if。注意循环中每一项的索引为$idx，值为$item。需要用'$'来引用，而且没有像wx:for-item这样的属性来改变变量名。重命名可以写成for="{{(index,value)in...}}{{$idx}}:{{$item}}exportdefault{data:{t1:"Eat",t2:"sleep",t3:"打豆豆",array:[1,3,5,7,9,2,4,6,8]}}2.微信小程序中自定义tabBar一个tabBar即可直接在app.json中定义。"tabBar":{"color":"#333333","backgroundColor":"#fdfdfd","selectedColor":"#E20A0B","list":[{"pagePath":"pages/weather/weather","text":"weather","iconPath":"icon/weather.png","selectedIconPath":"icon/weather1.png"},...]}鸿蒙在json中没有继承这样的配置项，但是我们可以自己写一个flex布局，甚至可以添加动画等更丰富的功能。考虑到每个菜单项都有选中和未选中两种状态，所以需要分别准备两张图片。图片放在/entry/src/main/js/default/common文件夹下，在js文件中定义菜单栏数据。这里需要注意的是，虽然common文件夹和页面js文件在目录结构上存在父目录关系，但是在加载js时common被识别为同级目录，需要注意image目录定义.exportdefault{data:{tabBar:[{text:"Weather",img1:"./common/icon/weather.png",img2:"./common/icon/weather1.png"},{text:"每日新闻",img1:"./common/icon/news.png",img2:"./common/icon/news1.png"},{text:"localnews",img1:"./common/icon/local.png",img2:"./common/icon/local1.png"},{text:"Query",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:1pxsolid#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对应item的颜色和图片，达到“四两千斤”的效果。changeMenu(idx){this.barIdx=idx;}这里和微信小程序还有一个区别，微信小程序需要使用wx.setData()函数来设置data中的值，而鸿蒙直接使用这个。键=值就足够了。点击其他菜单项：3.结合swiper翻页tabBar完成了，但是这个菜单栏是写在一个页面里的，怎么翻页呢？有一种方法可以在js页面中实现“翻页”，结合swiper。像微信小程序中的swiper组件，是一个可滑动的组件，多用于轮播、滚动通知等。鸿蒙的swiper需要为页面定义一个唯一的id属性，用于点击事件联动页面滑动。索引属性是当前索引值。/*pageswiper*/.pager{width:100%;height:100%;}.pager>div{display:flex;flex-direction:column;}现在需要实现两个功能，滑动swiper实现tabBar联动样式改变，点击tabBar中的item，联动swiper页面滑动。更改changeMenu方法：changeMenu(idx){this.barIdx=idx;this.$element("pager").swipeTo({index:idx});}鸿蒙通过this.$element(id)组件，如swiper组件，可以使用swipeTo()方法实现滑动，其index属性为要滑动到的页面的索引值（从0开始）。changePage方法只需要改变barIdx的值即可。通过swiper的onchange属性绑定方法名，将滑动到的index的值作为event.index传入。changePage(event){this.barIdx=event.index;}完成。?版权归作者和HarmonyOS技术社区共同所有。如需转载请注明出处，否则将追究法律责任。了解更多请访问：与华为官方共建鸿蒙科技社区https://harmonyos.51cto.com/#zz

上一篇：AppImagePool：帮助您查找和管理AppImage的应用商店

下一篇：为什么Kubernetes是新的应用服务器？

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