問題背景：
快應用頁面開發階段，ui佈局時總是會遇到要在頁面上實現一個可以任意拖動的導航欄，且在拖動時不能超出屏幕和導航欄不能在到邊界時被壓縮。一些開發者就會被困住了，這裏就介紹一個實現導航欄的一個簡易方式。
方案：
1、通過block實現組件堆疊效果，使得image圖標位於list組件上方，並將image的樣式設置爲“position: fixed”。
2、通過監聽image組件的touchmove觸摸事件實現動態設置其位置，具體可參見“通用事件”中的“touchmove事件”和“TouchEvent類型說明”。
3、device.getInfoSync獲取頁面的寬高來設置邊界，保證導航欄不會滑到屏幕外。
實現代碼：
<template>
<div class="item-container">
<block>
<!-- <stack> -->
<div class="container">
<list class="list" style="height: 100px" for="{{this.dataList}}">
<list-item class="list-item" type="content">
<text>{{ $item.name }}</text>
</list-item>
</list>
</div>
<image id="img" style="position: fixed;left: {{this.clientX}};top:{{this.clientY}}" class="image" src="/Common/logo.png" ontouchmove="touchmove"></image>
<!-- </stack> -->
</block>
</div>
</template>
<style>
.item-container {
margin-bottom: 50px;
flex-direction: column;
}
.container {
flex-direction: column;
}
.list {
flex-direction: column;
}
.image {
border-radius: 100px;
height: 150px;
}
.list-item {
border: 1px solid #c21f1f;
}
</style>
<script>
import device from '@system.device';
export default {
data: {
clientX: "",
clientY: "",
width: 0,
height: 0,
dataList: [
{ name: "Language" },
{ name: "Maths" },
{ name: "English" },
{ name: "PE" },
{ name: "History" },
{ name: "Geography" },
{ name: "Science" },
{ name: "Physics" },
{ name: "Chemical" },
{ name: "Biology" },
{ name: "Music" },
{ name: "Art" },
{ name: "Language1" },
{ name: "Maths1" },
]
},
onInit: function () {
this.$page.setTitleBar({ text: "Long press to drag the icon" });
console.info("Application onInit");
},
onShow(options) {
console.info("Application onShow");
const res = device.getInfoSync();
this.width = res.windowLogicWidth
this.height = res.windowLogicHeight
console.info("hjj", typeof this.width);
},
onHide(options) {
console.info("Application onHide");
},
touchmove: function (TouchEvent) {
console.log(JSON.stringify(TouchEvent.changedTouches));
this.clientX = (TouchEvent.changedTouches[0].clientX - 75) + "px"
this.clientY = (TouchEvent.changedTouches[0].clientY - 75) + "px"
console.log("clientX = " + TouchEvent.changedTouches[0].clientX);
console.log("clientY = " + TouchEvent.changedTouches[0].clientY);
if ((TouchEvent.changedTouches[0].clientX - 75) <= 0) {
this.clientX = 0 + "px"
}
if ((TouchEvent.changedTouches[0].clientY - 75) <= 0) {
this.clientY = 0 + "px"
}
if ((TouchEvent.changedTouches[0].clientX) >= this.width - 75) {
this.clientX = 600 + "px"
}
if ((TouchEvent.changedTouches[0].clientY) >= this.height - 75) {
this.clientY = 1230 + "px"
}
}
};
</script>
欲瞭解更多更全技術文章，歡迎訪問https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh