微信小程序可拖动悬浮框组件：YFWeappMovableView 实战指南-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00010/article/details/142161332

微信小程序可拖动悬浮框组件：YFWeappMovableView 实战指南

YFWeappMovableView 项目地址: https://gitcode.com/gh_mirrors/yf/YFWeappMovableView

项目介绍

YFWeappMovableView 是一个适用于微信小程序的组件，它实现了一个组件化的可拖动悬浮框功能。利用 movable-view 和 movable-area 这两个微信小程序内置组件，本项目提供了一种简单且灵活的方式来创建可在页面上自由移动的交互元素。通过这个开源库，开发者可以轻松地为自己的小程序添加拖动返回首页等悬浮按钮功能，提升用户体验。

项目快速启动

要迅速集成 YFWeappMovableView 到你的微信小程序项目中，只需跟随以下步骤：

步骤一：克隆或下载项目

首先，在命令行中执行以下命令来克隆项目到本地：

git clone https://github.com/ChinaFanny/YFWeappMovableView.git

或者直接下载ZIP文件并解压。

步骤二：集成到你的小程序项目

将 YFWeappMovableView 文件夹复制到你的小程序项目的 components 目录下。
在需要使用此组件的页面的 .wxml 文件中，引入并使用该组件：

<!--在你的页面.wxml文件中添加以下代码片段-->
<movable-custom-view bindtap="yourCustomHandler" show="{{true}}" moveViewLeft="{{moveViewLeft}}" moveViewTop="{{moveViewTop}}"></movable-custom-view>

确保在对应的 .js 文件中初始化所需的数据字段，例如：

// 在你的页面.js文件的data部分初始化变量
data: {
    sysWidth: wx.getSystemInfoSync().windowWidth, // 获取屏幕宽度
    sysHeight: wx.getSystemInfoSync().windowHeight, // 获取屏幕高度
    moveViewLeft: 0, // 初始化位置
    moveViewTop: 0   // 初始化位置
},

并在相应的生命周期函数中设置正确的起始位置。

步骤三：配置和运行

确保在 .json 页面配置文件中允许自定义组件，并在小程序预览或发布时体验你的拖动悬浮框。

应用案例和最佳实践

最佳实践中，将此拖动悬浮框应用于需要快速导航回主页或触发特定操作的场景，如阅读器应用的底部返回按钮、购物APP中的浮动购物车图标等。调整悬浮框的位置和样式，使其既不干扰主要内容，又能方便用户访问。

<!-- 示例：在.wxml中定制样式 -->
<movable-custom-view 
    direction="all"
    x="{{moveViewX}}"
    y="{{moveViewY}}" 
    style="z-index: 99; width: 60px; height: 60px;"
    bindchange="handleMoveChange">
    <view class="custom-icon-slot">返回</view>
</movable-custom-view>