從微信小程序到鴻蒙JS開發【02】-數據綁定&tabBar&swiper

作者：Chris 2021-02-05 09:46:16

開發

文章由鴻蒙社區產出，想要了解更多內容請前往：51CTO和華為官方戰略合作共建的鴻蒙技術社區https://harmonyos.51cto.com/#zz

[[380592]]

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

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

1、鴻蒙的數據綁定

微信小程序的數據綁定是類似于Vue的，wxml文件用 {{ }} 和對應js文件中的data對象中的屬性進行綁定。

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

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布局使頁面美觀。判斷當前選中哪一項，則可以使用三元表達式。

<!-- 底部菜單欄 --> 
    <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，其不會像微信小程序一樣自動傳入一個事件對象，而需要我們自行定義傳入的參數。如上的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 --> 
    <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; 
}

現需要實現兩個功能，滑動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; 
}

大功告成。

想了解更多內容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術社區

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

責任編輯：jianghua 來源：鴻蒙社區

鴻蒙 HarmonyOS js開發