收藏
回答

view z-index 层级定位出错,开发工具测试没问师,真机测试出错,请问怎么处理?

wxss文件
.itemBox {
  background: white;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0rpx 20rpx;
  box-shadow: 0 2px 6px 0 rgba(000.4);
}

js 文件
Page({
  data: {
    // 列表数据
    dataList: [{
        content: "苹果"
      },
      {
        content: "香蕉"
      },
      {
        content: "梨子"
      },
        content: "苹果"
      },
      {
        content: "香蕉"
      },
      {
        content: "梨子"
      },
        content: "苹果"
      },
      {
        content: "香蕉"
      },
      {
        content: "梨子"
      },
        content: "苹果"
      },
      {
        content: "香蕉"
      },
      {
        content: "梨子"
      },
      }],
    // 移动块的id
    moveIdnull,
    // 最终停止的位置
    endY0,
  },
  onLoad() {
    this.init(this.data.dataList)
  },
  // 重置列表顺序
  init(dataList) {
    // 列表项高度
    const ITEM_HEIGHT = 40
    // 列表项上外边距
    const ITEM_MARGIN_TOP = 14
    let newDataList = dataList.map((item, index) => {
      item.id = index
      // 重置单项的y坐标(组件默认是绝对定位 left:0  top:0 )
      item.y = (ITEM_HEIGHT + ITEM_MARGIN_TOP) * index + ITEM_MARGIN_TOP
      return item
    })
    console.log('set',newDataList)
    this.setData({
      dataList: newDataList
    })
  },
  // 移动中-获取移动元素的id,实时获取移动元素的y坐标
  moving(e) {
    //console.log(e.currentTarget.dataset,e.detail.y)
    this.setData({
      moveId: e.currentTarget.dataset.moveid,
      endY: e.detail.y,
    })
  },
  // 移动后
  moved() {
    let {
      dataList,
      moveId,
      endY
    } = this.data
    let newDataList = JSON.parse(JSON.stringify(dataList))
    newDataList[moveId].y = endY
    console.log('new',newDataList)
    newDataList = newDataList.sort((a, b) => a.y - b.y)
    this.init(newDataList)
  }
})
wxml文件

  
    {{index}}---{{item.electric_name}}--{{moveId}}
  


代码来源网码:朝阳39

BUG重现:比如,把第三个拖到第四个,没问题。但是把刚刚拖下来的第三个(这时候已经是处于第四)拖回原位,第四个拖上去,还是把第三个拖下来,层次都在低层,其它项不受影响。
这个要怎么解决?
补充一下,评论里的朋友指出要加上属性:position,加了如下,还是不可以
<movable-area style="width: 100%;height:{{(dataList.length)*60}}px;position: absolute;">
  <movable-view class="itemBox" style="z-index:{{index == moveId ?999 : 1}};position: absolute;" wx:for="{{dataList}}" wx:key="mac" y="{{item.y}}" direction="all" bind:change="moving" bind:touchend='moved' data-moveid="{{index}}">
    {{index}}---{{item.electric_name}}--{{moveId}}
  </movable-view>
</movable-area>
最后一次编辑于  04-08
回答关注问题邀请回答
收藏

2 个回答

  • Demons
    Demons
    04-09

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    04-09
    有用
    回复
  • H1HAO 🇨🇳
    H1HAO 🇨🇳
    04-08
    movable-view的z-index那加定位属性啊,z-index是基于定位来的,position: relative;
    
    04-08
    有用 1
    回复 3
    • A_jree
      A_jree
      04-08
      好的,我试试
      04-08
      回复
    • A_jree
      A_jree
      04-08
      试过了,不可以
      04-08
      回复
    • H1HAO 🇨🇳
      H1HAO 🇨🇳
      04-09回复A_jree
      别绝对定位啊,绝对定位是基于父级进行定位,加relative的意思主要是让z-index生效,而不是基于父级定位,然后你在去操作看元素的定位层级是否正确即可
      04-09
      1
      回复
登录 后发表内容