0
点赞
收藏
分享

微信扫一扫

【快应用】任意拖动图标实现案例

爱情锦囊 2022-12-08 阅读 164

问题背景:

快应用页面开发阶段,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>

【快应用】任意拖动图标实现案例_List

​欲了解更多更全技术文章,欢迎访问​​https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh​​

举报

相关推荐

0 条评论