小程序拖動(dòng)區(qū)域?qū)崿F(xiàn)排序效果
小程序拖動(dòng)區(qū)域進(jìn)行排序的具體代碼,供大家參考,具體內(nèi)容如下
需求:點(diǎn)擊藍(lán)色圓圈圖標(biāo),所有區(qū)域進(jìn)行展開或者收起切換,當(dāng)所有區(qū)域收起時(shí),點(diǎn)擊區(qū)域頭部文字或者空白處可進(jìn)行拖動(dòng)排序,效果如下:
本人新手,比較菜鳥,借鑒別的大佬,可能寫的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)前組件相對(duì)于父容器的偏移量 ? ? ? this.setData({ ? ? ? ? moveIndex: moveIndex, ? ? ? ? top: y1//移動(dòng)盒子所在的位置 ? ? ? }) ? ? } ? }, ? 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 ? ? ? }) ? ? } ? } })
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)點(diǎn)擊卡片 翻轉(zhuǎn)效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊卡片 翻轉(zhuǎn)效果本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09JS簡(jiǎn)單實(shí)現(xiàn)移動(dòng)端日歷功能示例
這篇文章主要介紹了JS簡(jiǎn)單實(shí)現(xiàn)移動(dòng)端日歷功能的方法,涉及javascript針對(duì)日期與時(shí)間的操作及顯示相關(guān)技巧,需要的朋友可以參考下2016-12-12小程序?qū)崿F(xiàn)多個(gè)選項(xiàng)卡切換
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)多個(gè)選項(xiàng)卡切換,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06uni-app自定義導(dǎo)航欄右側(cè)做增加按鈕并跳轉(zhuǎn)鏈接功能
這篇文章主要介紹了uni-app自定義導(dǎo)航欄右側(cè)做增加按鈕并跳轉(zhuǎn)鏈接,本文通過實(shí)例代碼給大家分享實(shí)現(xiàn)思路,代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03uni-app使用Vite.config.js配置文件的超詳細(xì)教程
這篇文章主要給大家介紹了關(guān)于uni-app使用Vite.config.js配置文件的超詳細(xì)教程,在uniapp開發(fā)中,vue.config.js是配置webpack的關(guān)鍵文件之一,也可以說是uniapp項(xiàng)目自定義配置的中心,需要的朋友可以參考下2023-12-12深入探究使JavaScript動(dòng)畫流暢的一些方法
這篇文章主要介紹了使JavaScript動(dòng)畫流暢的一些方法,包括與CSS動(dòng)畫效果的一些對(duì)比,需要的朋友可以參考下2015-06-06輕松實(shí)現(xiàn)js彈框顯示選項(xiàng)
這篇文章主要為大家詳細(xì)介紹了js輕松實(shí)現(xiàn)彈框顯示選項(xiàng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-09-09