view z-index 层级定位出错,开发工具测试没问师,真机测试出错,请问怎么处理?
wxss文件
.itemBox {
background: white;
width: 100%;
height: 80rpx;
line-height: 80rpx;
padding: 0rpx 20rpx;
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .4);
}
js 文件
Page({
data: {
// 列表数据
dataList: [{
content: "苹果"
},
{
content: "香蕉"
},
{
content: "梨子"
},
content: "苹果"
},
{
content: "香蕉"
},
{
content: "梨子"
},
content: "苹果"
},
{
content: "香蕉"
},
{
content: "梨子"
},
content: "苹果"
},
{
content: "香蕉"
},
{
content: "梨子"
},
}],
// 移动块的id
moveId: null,
// 最终停止的位置
endY: 0,
},
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>