小程序拖動區(qū)域?qū)崿F(xiàn)排序效果

更新時(shí)間：2022年09月09日 17:16:51 作者：tu_zi_dou

這篇文章主要為大家詳細(xì)介紹了小程序拖動區(qū)域?qū)崿F(xiàn)排序效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

小程序拖動區(qū)域進(jìn)行排序的具體代碼，供大家參考，具體內(nèi)容如下

需求：點(diǎn)擊藍(lán)色圓圈圖標(biāo)，所有區(qū)域進(jìn)行展開或者收起切換，當(dāng)所有區(qū)域收起時(shí)，點(diǎn)擊區(qū)域頭部文字或者空白處可進(jìn)行拖動排序，效果如下：

本人新手，比較菜鳥，借鑒別的大佬，可能寫的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()
? },
? // 初始化處理數(shù)據(jù)
? initData: function(){
? ? let areaList = this.data.areaData
? ? areaList.forEach( (item)=>{
? ? ? item.display = 'flex'
? ? })
? ? this.setData({
? ? ? areaData: areaList
? ? })
? ? console.log(this.data.areaData)
? },
? // 點(diǎn)擊綠色圓，子區(qū)域集體或者隱藏，或者展開
? 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
? ? })
? },
? // 當(dāng)所有子區(qū)域隱藏，區(qū)域才可以拖拽排序
? // 點(diǎn)擊區(qū)域頭部拖拽
? 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;//是事件綁定的當(dāng)前組件相對于父容器的偏移量
? ? ? 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
? ? ? })
? ? }
? }
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: