微信小程序实现自定义拖拽功能与布局

在微信小程序开发中，实现拖拽功能是一个常见的交互需求，特别是在展示和操作列表、卡片等元素时。在给定的代码片段中，主要展示了如何在"CateDetaile"页面中实现一个可拖动的收藏框功能。以下将详细解析关键知识点： 1. **视图组件（View）与事件处理**: - `<view class='collectBox' bindtap='addCollect' ...>`：这是HTML模板的一部分，`bindtap`事件绑定在`.collectBox`元素上，当用户点击该区域时会触发`addCollect`方法，可能是用于添加收藏或执行其他操作。 - `bindtouchmove="touchmove"` 和 `catch:touchmove`：这两个属性用于监听触摸移动事件，`touchmove`事件会在用户手指滑动时触发，而`catch`可能是为了防止意外的滚动行为。 2. **数据绑定与状态管理**: - `wx:if="{{write[0]+write[1]>0}}"`：这是一个条件渲染指令，只有当`write`数组的第一个和第二个元素之和大于0时，`.collectBox`才会显示。`write`数组包含当前的拖拽位置信息。 - `setData` 方法用于更新组件的视图状态，将计算出的新`write`值设置到数据对象中，从而实现动态更新视图的位置。 3. **生命周期方法**: - `onLoad`：在页面加载时调用，用于初始化数据，如获取系统信息和定义插屏广告。`getSysdata` 函数在此时被调用，获取设备窗口大小，并根据窗口大小计算默认的拖拽位置。 4. **计算拖拽位置**: - `var write = [];` 创建一个空数组来存储拖拽位置信息。 - `write[0]` 和 `write[1]` 分别表示X轴和Y轴的当前位置，它们基于屏幕宽度和高度百分比计算得出，`writePosition` 是基础的默认位置比例。 5. **滚动位置管理**: - `scrolltop` 变量可能用于保存页面滚动条的状态，以便在拖拽过程中调整布局，确保内容不会被遮挡。 6. **CSS样式与查询元素**: - `.collectBox` 的 `style="left:{{write[0]}}px;top:{{write[1]}}px;"` 设置了元素的初始位置，动态根据数据中的 `write` 更新位置。 - `wx.createSelectorQuery().select('.collectBox').boundingClientRect(function(res) {...})` 使用 WeChat 小程序的 CSS 选择器查询 API 来获取`.collectBox` 元素的尺寸信息，用于进一步的布局计算。 这段代码展示了如何在微信小程序中利用数据驱动的方式实现一个可以拖动的收藏框功能，通过监听用户的触摸移动事件，实时更新元素的位置，并结合页面加载时的数据初始化，提供流畅的用户体验。