[[380592]]

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

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

1、鴻蒙的數(shù)據(jù)綁定

微信小程序的數(shù)據(jù)綁定是類似于Vue的，wxml文件用 {{ }} 和對應(yīng)js文件中的data對象中的屬性進(jìn)行綁定。

<view class="city"> 
    {{ now.location.name }}市 
</view> 

data: { 
    now: { 
      location: { 
        name: "南京" 
      }, 
  } 
} 

那么鴻蒙中是否也是這樣綁定呢?嘗試在hml文件的div標(biāo)簽中使用 {{ }} 綁定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標(biāo)簽中直接放文字是不會顯示的，需要將文字放在標(biāo)簽中才會顯示出來。將hml文件做些更改，可以看到數(shù)據(jù)已被綁定到頁面中了。

<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> 

在一個數(shù)組中循環(huán)取值的方式和微信小程序也是類似的，可用一個標(biāo)簽作為邏輯控制塊，其屬性有for和if。需注意循環(huán)的每一項索引為$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布局自己寫一個，甚至可以加上動畫等更豐富的功能?？紤]到每一個菜單項有選中和未選中兩種狀態(tài)，各需準(zhǔn)備兩張圖片。將圖片放在/entry/src/main/js/default/common文件夾中，并在js文件中定義菜單欄數(shù)據(jù)。此處需要注意雖然在目錄結(jié)構(gòu)上common文件夾和頁面js文件存在父級目錄的關(guān)系，但在js加載時common被認(rèn)定為同一級目錄，圖片目錄定義處需注意。

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, 
    } 
} 

頁面設(shè)計上，采用position: fixed;將菜單欄固定在頁面底部，并結(jié)合flex布局使頁面美觀。判斷當(dāng)前選中哪一項，則可以使用三元表達(dá)式。

<!-- 底部菜單欄 --> 
    <div class="tabBar"> 
        <block for="{{ tabBar }}"> 
            <div class="cell" onclick="changeMenu($idx)"> 
                <div class="image"> 
                    <image src="{{ barIdx == $idx ? $item.img2: $item.img1 }}"></image> 
                </div> 
                <div class="text"> 
                    <text class="{{ barIdx == $idx ? 'a' : 'b' }}"> 
                        {{ $item.text }} 
                    </text> 
                </div> 
            </div> 
        </block> 
    </div> 

/*底部菜單*/ 
.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，其不會像微信小程序一樣自動傳入一個事件對象，而需要我們自行定義傳入的參數(shù)。如上的onclick="changeMenu($idx)"就是鴻蒙傳入點擊事件的方法。這個函數(shù)只需要改變barIdx的值便可以實現(xiàn)點擊切換tabBar對應(yīng)項的顏色和圖片，達(dá)到“四兩撥千斤”的效果。

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

 這里又出現(xiàn)了和微信小程序的不同處，微信小程序改變data中的值需要使用wx.setData()函數(shù)進(jìn)行設(shè)置，而鴻蒙中直接使用this.key = value即可。

點一下其他菜單項：

3、結(jié)合swiper進(jìn)行翻頁

tabBar完成了，但這個菜單欄是寫在一個頁面中的，要怎樣進(jìn)行翻頁呢?有一個在一個js頁面中實現(xiàn)“翻頁”的方式，就是結(jié)合swiper。和微信小程序中的swiper組件一樣，它是一個可滑動的組件，多用于輪播圖、滾動通知等。

鴻蒙的swiper需要定義一個頁面唯一的id屬性，用于點擊事件聯(lián)動頁面滑動。index屬性為當(dāng)前的索引值。

<!-- 劃頁swiper --> 
    <swiper id="pager" index="0" class="pager" onchange="changePage" indicator="false"> 
    <!--4個div作為4頁--> 
    </swiper> 

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

 現(xiàn)需要實現(xiàn)兩個功能，滑動swiper實現(xiàn)tabBar聯(lián)動樣式變化，以及點擊tabBar中的項聯(lián)動swiper頁面滑動。更改changeMenu方法：

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

 鴻蒙通過this.$element(id)找到頁面中對應(yīng)id的組件，如為swiper組件則可使用swipeTo()方法實現(xiàn)滑動，其index屬性則為滑動到的頁面索引值(0開始)。

changePage方法，只需要改變barIdx的值即可。通過swiper的onchange屬性綁定方法名，滑動到的index的值會作為event.index被傳入。

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

 大功告成。

©著作權(quán)歸作者和HarmonyOS技術(shù)社區(qū)共同所有，如需轉(zhuǎn)載，請注明出處，否則將追究法律責(zé)任。

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

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