小程序拖动区域实现排序效果
作者：tu_zi_dou
这篇文章主要为大家详细介绍了小程序拖动区域实现排序效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
小程序拖动区域进行排序的具体代码，供大家参考，具体内容如下
需求：点击蓝色圆圈图标，所有区域进行展开或者收起切换，当所有区域收起时，点击区域头部文字或者空白处可进行拖动排序，效果如下：
本人新手，比较菜鸟，借鉴别的大佬，可能写的low，代码如下，欢迎指教：
一、html部分
<view class="area-section">
<block wx:for="{{areaData}}" wx:for-item="areaItem" wx:key='index'>
<view class="areaItem {{moveIndex == index ? 'move' : ''}}" style="top: {{top}}px" >
<view class="head">
<view class="head-sort" catchtap="changeShowSateEvent"></view>
<view class="head-name"
catchtouchstart="moveStartEvent"
catchtouchmove="moveEvent"
catchtouchend="moveEndEvent"
data-index="{{index}}"
data-item = "{{areaItem}}"
>{{areaItem.name}}</view>
</view>
<view class="container" style="display: {{areaItem.display}}">
<block wx:for="{{areaItem.list}}" wx:key="index">
<view class="item">{{item}}</view>
</block>
</view>
</view>
</block>
</view>二、css部分
/* pages/move/move.wxss */
.area-section{
position: relative;
}
.areaItem{
margin: 0 30rpx;
margin-bottom: 40rpx;
padding-left: 20rpx;
box-sizing: border-box;
}
.areaItem .head{
display: flex;
align-items: center;
height: 80rpx;
line-height: 80rpx;
}
.areaItem .head-sort{
width: 40rpx;
height: 40rpx;
border-radius: 20rpx;
background-color: turquoise;
margin-right: 20rpx;
}
.areaItem .head .name{
flex: 1;
}
.areaItem .container{
display: flex;
flex-wrap: wrap;
}
.areaItem .container .item{
width: 315rpx;
height: 200rpx;
background-color: rgb(88, 177, 177);
color: white;
border-radius: 20rpx;
box-shadow: 0rpx 3rpx 8rpx rgb(83, 82, 82);
margin: 20rpx 0;
margin-right: 20rpx;
display: flex;
justify-content: center;
align-items: center;
}
.areaItem .container .item:nth-of-type(2n){
margin-right: 0rpx;
}
.move{
box-shadow: 1px 1px 10rpx rgba(3, 129, 87, 0.685);
background-color: rgba(255, 255, 255, 0.603);
border-radius: 20rpx;
position: absolute;
width: 670rpx;
}三、js部分
let y,y1,y2
Page({
data: {
areaData: [
{
name: "北华街1栋",
list: ["北华101","北华102"]
},
{
name: "东林街2栋",
list: ["东林101","东林102","东林103"]
},
{
name: "季南街3栋",
list: ["季南101","季南102","季南103"]
},
{
name: "丘亭街4栋",
list: ["丘亭101","丘亭102"]
}
],
currentAreaShowState: true,
moveIndex: -1
},
onLoad: function(){
this.initData()
},
// 初始化处理数据
initData: function(){
let areaList = this.data.areaData
areaList.forEach( (item)=>{
item.display = 'flex'
})
this.setData({
areaData: areaList
})
console.log(this.data.areaData)
},
// 点击绿色圆，子区域集体或者隐藏，或者展开
changeShowSateEvent: function(){
let currentAreaShowState = this.data.currentAreaShowState
let areaList = this.data.areaData
areaList.forEach( (item)=>{
currentAreaShowState ? item.display = 'none' : item.display = 'flex'
})
this.setData({
currentAreaShowState: !currentAreaShowState,
areaData: areaList
})
},
// 当所有子区域隐藏，区域才可以拖拽排序
// 点击区域头部拖拽
moveStartEvent: function(e){
if(!this.data.currentAreaShowState){
console.log(e)
let moveIndex = e.currentTarget.dataset.index
y = e.touches[0].clientY;
y1 = e.currentTarget.offsetTop;//是事件绑定的当前组件相对于父容器的偏移量
this.setData({
moveIndex: moveIndex,
top: y1//移动盒子所在的位置
})
}
},
moveEvent: function(e){
if(!this.data.currentAreaShowState){
let moveIndex = e.currentTarget.dataset.index
console.log(e)
y2 = e.touches[0].clientY - y + y1;
this.setData({
moveIndex: moveIndex,
top: y2
})
}
},
moveEndEvent: function(e){
if(!this.data.currentAreaShowState){
let moveIndex = this.data.moveIndex
let areaData = this.data.areaData
let areaItem = e.currentTarget.dataset.item
let positionIndex = 0
console.log(y2)
if(y2>(areaData.length-1)*55){
positionIndex = areaData.length-1
}else if(y2<=5){
positionIndex = 0
}else{
if(y2%((80+30)/2)>15){//(行高+行间距)/2>15
positionIndex = parseInt(y2/((80+30)/2))+1
}else{
positionIndex = parseInt(y2/((80+30)/2))
}
}
console.log(positionIndex)
if(positionIndex != moveIndex){
if(positionIndex > moveIndex){
areaData.splice(positionIndex+1,0,areaItem)
areaData.splice(moveIndex,1)
}else if(positionIndex < moveIndex){
areaData.splice(positionIndex,0,areaItem)
areaData.splice(moveIndex+1,1)
}
}
this.setData({
areaData: areaData,
moveIndex: -1
})
}
}
})
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。