置顶movable-view 设置scale后添加新的movable-view后上一个元素会自动偏移？精选热门

08-182121浏览问题模块： API和组件

我用了一个数组存放多个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;
  }
}

置顶movable-view 设置scale后添加新的movable-view后上一个元素会自动偏移？精选热门

请选择投诉理由

删除当前帖子

删除后帖子内容及评论将一并被删除，且不可恢复。

关注“微信开放社区”公众号

反馈

新增或编辑超链接

插入视频

新增或编辑超链接

插入视频

请选择投诉理由

请选择投诉理由

新增或编辑超链接

插入视频

请选择投诉理由

新增或编辑超链接

插入视频

关注“微信开放社区”公众号