我用了一个数组存放多个movable-view ，然后进行缩放最大或者最小值，再拖拽几下，再添加新的数据到数组后，movable-area这个组件会重新运行，然后上一个元素就自动偏移了。  代码片段真机运行好像有问题，只能创建小程序 <view class="container"> <!-- 顶部标题 --> <view class="header"> <text class="title">藏品布局工具</text> </view> <view class="main-content"> <!-- 中间：布局区域 --> <view class="center-panel"> <text class="panel-title">布局区域</text> <movable-area class="layout-area"> <!-- 选中的背景图 --> <image wx:if="{{data.default}}" src="{{data.default.bgImg}}" class="background-image"></image> <!-- 可拖拽的藏品 --> <movable-view direction="all" scale bindchange="handleDragChange" wx:for="{{addedCollections}}" wx:key="item.id" class="draggable-item" x="{{item.x}}" y="{{item.y}}" scale-value="{{item.scale}}" bindscale="onScale" scale-min="0.1" scale-max="2" animation="{{false}}" style="z-index: {{item.zIndex}}; position: absolute; width: {{item.width}}px; height: {{item.height}}px; background: url({{item.thumbnail}}) no-repeat; background-size: 100% 100%;" data-id="{{item}}" data-index="{{index}}" > </movable-view> </movable-area> </view> <!-- 右侧：藏品列表 --> <view class="right-panel"> <text class="panel-title">我的藏品</text> <view class="my-collections"> <view class="collection-item" wx:for="{{data.cpList}}" wx:key="item.id" bindtap="addItemDirectly" data-item="{{item}}"> <image src="{{item.thumbnail}}" mode="aspectFill" class="collection-img" style="width: 100px; height: 100px;"></image> </view> </view> </view> </view> <!-- 底部操作按钮 --> <view class="bottom-actions"> <button class="action-btn" bindtap="resetLayout">重置布局</button> <button class="action-btn primary" bindtap="saveLayout">保存布局</button> </view> </view> Page({ data: { data: { default: { bgImg: 'https://oss.elianip.com/images/2025/August/64201b5f309c69a43dc8c0355da67aa5a01a21.jpg' }, cpList: [ { "id": 350315, "userId": "952aedf8-4141-4fac-b6d4-3effdcf9fecc", "createTime": 1749023825, "nftIntro": "农历九月初九，二九相重，称为重九。九是阳数，所以“重九”又叫“重阳”。九九重阳，寓意长长久久。在1989年，我国把每年农历的九月初九定为“老人节”，所谓百善孝为先，重阳节敬老，最能体现古人德孝这一独特而朴素的自然道德观。", "nftName": "重阳节", "nftId": 366, "imagePath": "https://oss.elianip.com/images/2023/October/43087f618f516c70b4a418b02a8de803924915.jpg", "txId": "", "amount": 1, "nftSn": 1256, "totalQuantity": 2023, "artistName": "川渝数藏", "artistLogo": "https://oss.elianip.com/images/2023/July/5.png", "frozenTime": 2592000, "transferCount": 1, "isNew": "0", "thumbnail": "https://oss.elianip.com/images/2023/October/43087f618f516c70b4a418b02a8de803924915.jpg", "tag": "", "tagImage": "", "lockTime": 0 }, { "id": 350314, "userId": "952aedf8-4141-4fac-b6d4-3effdcf9fecc", "createTime": 1749023454, "nftIntro": "农历九月初九，二九相重，称为重九。九是阳数，所以“重九”又叫“重阳”。九九重阳，寓意长长久久。在1989年，我国把每年农历的九月初九定为“老人节”，所谓百善孝为先，重阳节敬老，最能体现古人德孝这一独特而朴素的自然道德观。", "nftName": "重阳节", "nftId": 366, "imagePath": "https://oss.elianip.com/images/2023/October/43087f618f516c70b4a418b02a8de803924915.jpg", "txId": "", "amount": 1, "nftSn": 1255, "totalQuantity": 2023, "artistName": "川渝数藏", "artistLogo": "https://oss.elianip.com/images/2023/July/5.png", "frozenTime": 2592000, "transferCount": 1, "isNew": 0, "thumbnail": "https://oss.elianip.com/images/2023/October/43087f618f516c70b4a418b02a8de803924915.jpg", "tag": "", "tagImage": "", "lockTime": 0 }, { "id": 350313, "userId": "952aedf8-4141-4fac-b6d4-3effdcf9fecc", "createTime": 1749022226, "nftIntro": "农历九月初九，二九相重，称为重九。九是阳数，所以“重九”又叫“重阳”。九九重阳，寓意长长久久。在1989年，我国把每年农历的九月初九定为“老人节”，所谓百善孝为先，重阳节敬老，最能体现古人德孝这一独特而朴素的自然道德观。", "nftName": "重阳节", "nftId": 366, "imagePath": "https://oss.elianip.com/images/2023/October/43087f618f516c70b4a418b02a8de803924915.jpg", "txId": "", "amount": 1, "nftSn": 1254, "totalQuantity": 2023, "artistName": "川渝数藏", "artistLogo": "https://oss.elianip.com/images/2023/July/5.png", "frozenTime": 2592000, "transferCount": 1, "isNew": 1, "thumbnail": "https://oss.elianip.com/images/2023/October/43087f618f516c70b4a418b02a8de803924915.jpg", "tag": "", "tagImage": "", "lockTime": 0 }, { "id": 350312, "userId": "952aedf8-4141-4fac-b6d4-3effdcf9fecc", "createTime": 1749022166, "nftIntro": "农历九月初九，二九相重，称为重九。九是阳数，所以“重九”又叫“重阳”。九九重阳，寓意长长久久。在1989年，我国把每年农历的九月初九定为“老人节”，所谓百善孝为先，重阳节敬老，最能体现古人德孝这一独特而朴素的自然道德观。", "nftName": "重阳节", "nftId": 366, "imagePath": "https://oss.elianip.com/images/2023/October/43087f618f516c70b4a418b02a8de803924915.jpg", "txId": "", "amount": 1, "nftSn": 1253, "totalQuantity": 2023, "artistName": "川渝数藏", "artistLogo": "https://oss.elianip.com/images/2023/July/5.png", "frozenTime": 2592000, "transferCount": 1, "isNew": 1, "thumbnail": "https://oss.elianip.com/images/2023/October/43087f618f516c70b4a418b02a8de803924915.jpg", "tag": "", "tagImage": "", "lockTime": 0 }, { "id": 350311, "userId": "952aedf8-4141-4fac-b6d4-3effdcf9fecc", "createTime": 1749022089, "nftIntro": "农历九月初九，二九相重，称为重九。九是阳数，所以“重九”又叫“重阳”。九九重阳，寓意长长久久。在1989年，我国把每年农历的九月初九定为“老人节”，所谓百善孝为先，重阳节敬老，最能体现古人德孝这一独特而朴素的自然道德观。", "nftName": "重阳节", "nftId": 366, "imagePath": "https://oss.elianip.com/images/2023/October/43087f618f516c70b4a418b02a8de803924915.jpg", "txId": "", "amount": 1, "nftSn": 1252, "totalQuantity": 2023, "artistName": "川渝数藏", "artistLogo": "https://oss.elianip.com/images/2023/July/5.png", "frozenTime": 2592000, "transferCount": 1, "isNew": 1, "thumbnail": "https://oss.elianip.com/images/2023/October/43087f618f516c70b4a418b02a8de803924915.jpg", "tag": "", "tagImage": "", "lockTime": 0 }, { "id": 350310, "userId": "952aedf8-4141-4fac-b6d4-3effdcf9fecc", "createTime": 1749019534, "nftIntro": "农历九月初九，二九相重，称为重九。九是阳数，所以“重九”又叫“重阳”。九九重阳，寓意长长久久。在1989年，我国把每年农历的九月初九定为“老人节”，所谓百善孝为先，重阳节敬老，最能体现古人德孝这一独特而朴素的自然道德观。", "nftName": "重阳节", "nftId": 366, "imagePath": "https://oss.elianip.com/images/2023/October/43087f618f516c70b4a418b02a8de803924915.jpg", "txId": "", "amount": 1, "nftSn": 1251, "totalQuantity": 2023, "artistName": "川渝数藏", "artistLogo": "https://oss.elianip.com/images/2023/July/5.png", "frozenTime": 2592000, "transferCount": 1, "isNew": 1, "thumbnail": "https://oss.elianip.com/images/2023/October/43087f618f516c70b4a418b02a8de803924915.jpg", "tag": "", "tagImage": "", "lockTime": 0 }, { "id": 350287, "userId": "952aedf8-4141-4fac-b6d4-3effdcf9fecc", "createTime": 1749017366, "nftIntro": "民以食为天，我们感恩土地的馈赠喜看稻菽千重浪，同时铭记“珍惜盘中餐的古训，珍惜每一粒粮食。在世界粮食日川渝数藏推出主题藏品《五谷丰登》以此向那些默默耕耘的农耕人致敬。", "nftName": "五谷丰登", "nftId": 534, "imagePath": "https://oss.elianip.com/images/2024/October/96ea720504a0d927850a764e1b21f7b341bfc1.jpg", "txId": "", "amount": 1, "nftSn": 1819, "totalQuantity": 2024, "artistName": "川渝数藏", "artistLogo": "https://oss.elianip.com/images/2023/July/5.png", "frozenTime": 0, "transferCount": 1, "isNew": 1, "thumbnail": "/images/2024/October/eb2ee5e11906f4bd10a48c34b8b28a6f988120.jpg", "tag": "", "tagImage": "", "lockTime": 0 }, { "id": 350285, "userId": "952aedf8-4141-4fac-b6d4-3effdcf9fecc", "createTime": 1749017366, "nftIntro": "民以食为天，我们感恩土地的馈赠喜看稻菽千重浪，同时铭记“珍惜盘中餐的古训，珍惜每一粒粮食。在世界粮食日川渝数藏推出主题藏品《五谷丰登》以此向那些默默耕耘的农耕人致敬。", "nftName": "五谷丰登", "nftId": 534, "imagePath": "https://oss.elianip.com/images/2024/October/96ea720504a0d927850a764e1b21f7b341bfc1.jpg", "txId": "", "amount": 1, "nftSn": 1818, "totalQuantity": 2024, "artistName": "川渝数藏", "artistLogo": "https://oss.elianip.com/images/2023/July/5.png", "frozenTime": 0, "transferCount": 1, "isNew": 1, "thumbnail": "/images/2024/October/eb2ee5e11906f4bd10a48c34b8b28a6f988120.jpg", "tag": "", "tagImage": "", "lockTime": 0 } ], scale: 1, addedCollections: [] }, addedCollections: [], layoutAreaRect: { width: 0, height: 0 }, maxZIndex: 0 }, onLoad: function(option) { // 初始化布局区域尺寸 this.getLayoutAreaRect().then(() => { console.log('布局区域尺寸初始化完成', this.data.layoutAreaRect); }); }, // 获取布局区域尺寸 getLayoutAreaRect: function() { return new Promise((resolve) => { wx.createSelectorQuery() .select(".layout-area") .boundingClientRect((rect) => { if (rect) { this.setData({ layoutAreaRect: { width: rect.width, height: rect.height } }); } resolve(); }) .exec(); }); }, // 直接添加藏品 addItemDirectly: async function(e) { const item = e.currentTarget.dataset.item; // 确保尺寸已获取 if (!this.data.layoutAreaRect.width) { await this.getLayoutAreaRect(); } this.addItemToLayout(item); }, // 更新zIndex updateMaxZIndex: function() { const maxZIndex = Math.max(...this.data.addedCollections.map((item) => item.zIndex || 0), 0); this.setData({ maxZIndex }); }, // 添加藏品到布局区域 addItemToLayout: function(item) { const { layoutAreaRect, addedCollections, maxZIndex } = this.data; const randomX = Math.ceil(Math.random() * 300) const randomY = Math.ceil(Math.random() * 300) const newItem = { ...item, x: randomX, y: randomY, oldx: randomX, oldy: randomY, disabled: false, scale: 1, scaleold: 1, width: '100', height: '100', zIndex: maxZIndex + 1, }; // 处理已有元素位置 if (addedCollections.length > 0) { addedCollections.map(item => { item.x=item.oldx item.y=item.oldy item.scale=item.scaleold return item }); } console.log(addedCollections) // 更新数组 const newAddedCollections = [...addedCollections, newItem]; this.setData({ addedCollections: newAddedCollections }, () => { this.updateMaxZIndex(); }); }, // 处理拖拽位置变化 handleDragChange: function(e) { console.log(e) const { index } = e.currentTarget.dataset; const { addedCollections } = this.data; const item = addedCollections[index]; this.updateMaxZIndex(); const newZIndex = this.data.maxZIndex + 1; // // 更新当前项 // addedCollections[index] = { // ...item, // zIndex: newZIndex, // oldx: e.detail.x, // oldy: e.detail.y // }; // console.log(e) // item.zIndex = newZIndex; if(e.detail.source!=''){ item.oldx = e.detail.x; item.oldy = e.detail.y; } //this.setData({ addedCollections }); }, // 缩放处理 onScale: function(e) { const { index } = e.currentTarget.dataset; const { addedCollections } = this.data; const item = addedCollections[index]; // 更新当前项的缩放信息 item.scaleold = e.detail.scale item.oldx = e.detail.x; item.oldy = e.detail.y; console.log('item,', item) // addedCollections[index] = { // ...item, // scaleold: e.detail.scale, // oldx: e.detail.x, // oldy: e.detail.y // }; // this.setData({ addedCollections }); }, // 重置布局 resetLayout: function() { wx.showModal({ title: '提示', content: '确定要清空当前布局吗？', success: res => { if (res.confirm) { this.setData({ addedCollections: [] }); } } }); }, // 保存布局 saveLayout: function() { if (this.data.addedCollections.length === 0) { wx.showToast({ title: '请添加藏品到布局', icon: 'none' }); return; } // 保存逻辑... wx.showToast({ title: '布局已保存', icon: 'success' }); } }); /* 保持原有样式不变 */ .container { display: flex; flex-direction: column; min-height: 100vh; background-color: #f5f5f5; } .header { padding: 16px; background-color: #333; color: white; text-align: center; } .title { font-size: 18px; font-weight: bold; } .main-content { display: flex; flex: 1; padding: 16px; gap: 16px; box-sizing: border-box; } .right-panel { width: 200px; background-color: white; border-radius: 8px; padding: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; box-sizing: border-box; } .center-panel { flex: 1; background-color: white; border-radius: 8px; padding: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; } .panel-title { font-size: 16px; font-weight: bold; margin-bottom: 12px; color: #333; padding-bottom: 8px; border-bottom: 1px solid #eee; } .my-collections { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1; } .collection-item { width: 100%; height: 80px; border-radius: 6px; cursor: pointer; transition: all 0.2s; position: relative; } .collection-item:active { opacity: 0.8; transform: scale(0.98); } .bg-img, .collection-img { width: 100%; height: 100%; object-fit: cover; } .layout-area { flex: 1; background-color: #f9f9f9; border-radius: 8px; overflow: hidden; position: relative; min-height: 500px; width: 100%; } .background-image { width: 100%; height: 100%; object-fit: contain; z-index: 0; } .draggable-item { /* width: 100px; height: 100px; */ } .bottom-actions { padding: 16px; display: flex; gap: 12px; justify-content: center; background-color: white; border-top: 1px solid #eee; } .action-btn { padding: 10px 20px; border-radius: 6px; font-size: 14px; border: 1px solid #ddd; background-color: white; color: #333; } .action-btn.primary { background-color: #007aff; color: white; border-color: #007aff; } @media (max-width: 768px) { .main-content { flex-direction: column; } .right-panel { width: 100%; height: 200px; } .my-collections { flex-direction: row; } .collection-item { flex: 1; height: 150px; } }

如题，需要做全屏视频滚动，网上看的都是swiper渲染三个节点，然后替换数据源，但是怎么判断上拉和下拉呢