vertical-drag
时间: 2023-10-09 20:15:16 浏览: 40
使用小程序的movable-area组件可以实现垂直拖动的效果。首先,在movable-area组件中设置direction属性为"vertical",这样就可以使其只能在垂直方向上进行拖动。然后,通过绑定touchend事件来监听拖动结束的事件。在事件处理函数中,可以获取到拖动结束时的y坐标,可以根据这个坐标来确定图标的位置。根据引用的代码示例,可以根据手指松开的位置来判断拖动结束后图标应该定位到左侧还是右侧。如果手指松开的位置在屏幕的左半部分,则将图标定位到左侧20px的位置;如果手指松开的位置在屏幕的右半部分,则将图标定位到右侧20px的位置。通过计算得到相应的x坐标值,并将其设置到movable-view组件的x属性上,即可实现垂直拖动效果。的代码示例,可以给movable-area设置pointer-events: none;,这样它就不再是鼠标事件的目标。然后,给movable-view设置pointer-events: auto;,这样子元素movable-view仍然可以接收鼠标事件。通过这种方式,可以达到在拖动过程中只有movable-view接收鼠标事件的效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [微信小程序组件 movable-area,实现小图标,在窗口中来回拖动](https://blog.csdn.net/elementFei/article/details/90081091)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]