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: "梨子"
},
}],
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
item.y = (ITEM_HEIGHT + ITEM_MARGIN_TOP) * index + ITEM_MARGIN_TOP
return item
})
console.log('set',newDataList)
this.setData({
dataList: newDataList
})
},
moving(e) {
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>
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
movable-view的z-index那加定位属性啊,z-index是基于定位来的,position: relative;