小程序自定义拖动排序uni-app)
1.用到的组件和事件
1)组件movable-area,movable-view
2) @touchend(拖动离开事件),movable-view的onChange事件,自定义克隆事件dragChange,自定义顶置事件overheadChange
注意:给每个盒子设定固定高度
过程:
点击拖动:设置可移动区域,循环数组,movable-view写要移动的盒子(用点击事件点击要移动的数据进行克隆,把数据从当前数组中摘取出来放入movable-view进行移动),再利用onChange事件捕捉x,y轴,利用设置的盒子高度和当前获取的y轴数据判断当前数组的下标。当手指离开触发拖动离开事件(把克隆数据插入数组的下标位置(onchange事件获取的下标)。
顶置:用splice方法返回删除的数组中的某一数据,再用unshift方法放到数组第一位。
可用参数
kelongList = {};
classClass = 0;
sortList: Array<any> = [
{
labelLevel: 0,
labelId: 0,
tagName: "关于我的",
campusShootingLabelType: 0,
createUserType: 0,
},
{
labelLevel: 0,
labelId: 0,
tagName: "我发布的",
campusShootingLabelType: 0,
createUserType: 0,
},
];
x = 0;
y = 0;
old = {
x: 0,
y: 0,
};
pagesX = 0;
pagesY = 0;
moveIndex = -1;
monitor = 0; //初始值0:监听拖动的盒子可出现 1:显示拖动的盒子 2:不显示拖动的盒子
kelongIndex = -1; //初始值 代表没有被移动的标签
1.movable-area指代可拖动的范围,在其中内嵌movable-view组件用于指示可拖动的区域。
<movable-area>
<view class="container">
<view class="" v-for="(item, index) in sortList" :key="index">
<!-- <view class="move_null" v-show="index == moveIndex"> </view> -->
<view class="flex justify-between conBox padding-lg">
<view class="title">{{ item.tagName }}</view>
<view class="flex">
<view class="Over" @click="overheadChange($event, index, item)">
<text
v-if="index == 0"
class="lg text-orange cuIcon-check"
></text>
<image
v-else
src="/pagesTaskLeave/static/overhead.png"
style="weight: 48rpx; height: 48rpx"
></image>
</view>
<view class="sort" @click="dragChange($event, index, item)"
><image
src="/pagesTaskLeave/static/antOutline.png"
style=""
></image
></view>
</view>
</view>
</view>
<view class="list_bottom"> </view>
</view>
<movable-view
:x="x"
:y="pagesY"
direction="vertical"
v-show="pagesX != 0 && pagesY != 0 && monitor == 1"
@change="onChange"
>
<view class="bg-green flex justify-between moveBox" @touchend="tap">
<view>{{ kelongList[0].tagName }}</view>
<view style="margin-left: 186rpx">
<image
src="/pagesTaskLeave/static/overhead.png"
style="width: 48rpx; height: 48rpx"
></image
></view>
<view style="margin-right: 14rpx"
><image
src="/pagesTaskLeave/static/antOutline.png"
style="width: 48rpx; height: 48rpx"
></image
></view>
</view>
</movable-view>
</movable-area>
2.点击进行克隆,并且数据放入movable-view就能移动
// 克隆
dragChange(e: any, index: any, item: any) {
//如果有克隆下标,说明上一个移动还没结束,不对其他标签有克隆的点击事件
console.log(index);
if (this.kelongIndex != -1) {
return;
} else {
console.log("kelongIndex:" this.kelongList);
}
this.kelongIndex = index;
this.monitor = 1;
this.pagesX = e.detail.x;
this.pagesY = e.detail.y - 120;
console.log(e.detail.y);
console.log(this.pagesY);
// this.pagesY = parseInt(e.detail.y) - 140;
var list = this.sortList.splice(index, 1);
this.kelongList = list;
}
3.onChange事件捕捉x,y轴,获取移动的下标
onChange(e: any) {
this.old.x = e.detail.x;
this.old.y = e.detail.y;
for (var i = 0; i < 40; i ) {
var start = i * 35;
var end = (i 1) * 35;
if (this.old.y >= start && this.old.y < end) {
this.moveIndex = i;
break;
}
}
}
4.手指离开触发拖动离开事件(把克隆数据插入数组的下标位置(onchange事件获取的下标)。
//拖动离开事件
tap(e: any) {
console.log("移动下标" this.moveIndex);
if (this.moveIndex != -1) {
var list: any = this.kelongList;
this.sortList.splice(this.moveIndex, 0, list[0]);
this.kelongList = {};
this.monitor = 2;
//确保不出现空
for (let i = 0; i < this.sortList.length; i ) {
if (this.sortList[i] == null || this.sortList[i] == undefined) {
this.sortList.splice(i, 1);
continue;
}
}
var a = uni.setStorageSync("sort", this.sortList);
this.moveIndex = -1;
this.kelongIndex = -1;
} else {
var list: any = this.kelongList;
this.sortList.splice(this.kelongIndex, 0, list[0]);
this.kelongList = {};
this.moveIndex = -1;
this.monitor = 2;
this.kelongIndex = -1;
}
}
顶置
//顶置
overheadChange(e: any, index: any, item: any) {
this.classClass = 1;
var list = this.sortList.splice(index, 1);
this.sortList.unshift(list[0]);
var a = uni.setStorageSync("sort", this.sortList);
}
全部代码
<template>
<view>
<!-- 顶部导航 -->
<view>
<cu-custom bgColor="bg-greenac70" isBack="true">
<block slot="backText"></block>
<block slot="content">分类管理</block>
</cu-custom>
</view>
<view>
<view class="flex justify-between padding-lg topBox">
<view>分类名称</view>
<view class="flex">
<view class="Overhead">顶置</view>
<view>拖动排序</view>
</view>
</view>
</view>
<movable-area>
<view class="container">
<view class="" v-for="(item, index) in sortList" :key="index">
<!-- <view class="move_null" v-show="index == moveIndex"> </view> -->
<view class="flex justify-between conBox padding-lg">
<view class="title">{{ item.tagName }}</view>
<view class="flex">
<view class="Over" @click="overheadChange($event, index, item)">
<text
v-if="index == 0"
class="lg text-orange cuIcon-check"
></text>
<image
v-else
src="/pagesTaskLeave/static/overhead.png"
style="weight: 48rpx; height: 48rpx"
></image>
</view>
<view class="sort" @click="dragChange($event, index, item)"
><image
src="/pagesTaskLeave/static/antOutline.png"
style=""
></image
></view>
</view>
</view>
</view>
<view class="list_bottom"> </view>
</view>
<movable-view
:x="x"
:y="pagesY"
direction="vertical"
v-show="pagesX != 0 && pagesY != 0 && monitor == 1"
@change="onChange"
>
<view class="bg-green flex justify-between moveBox" @touchend="tap">
<view>{{ kelongList[0].tagName }}</view>
<view style="margin-left: 186rpx">
<image
src="/pagesTaskLeave/static/overhead.png"
style="width: 48rpx; height: 48rpx"
></image
></view>
<view style="margin-right: 14rpx"
><image
src="/pagesTaskLeave/static/antOutline.png"
style="width: 48rpx; height: 48rpx"
></image
></view>
</view>
</movable-view>
</movable-area>
</view>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import RequestPageBase from "@/lib/request-page-base";
// import func from "vue-temp/vue-editor-bridge";
import { filter } from "vue/types/umd";
import Splash from "@/pages/splash/index.vue";
@Component({})
export default class 文件名称 extends RequestPageBase {
kelongList = {};
classClass = 0;
sortList: Array<any> = [
{
labelLevel: 0,
labelId: 0,
tagName: "关于我的",
campusShootingLabelType: 0,
createUserType: 0,
},
{
labelLevel: 0,
labelId: 0,
tagName: "我发布的",
campusShootingLabelType: 0,
createUserType: 0,
},
];
x = 0;
y = 0;
old = {
x: 0,
y: 0,
};
pagesX = 0;
pagesY = 0;
moveIndex = -1;
monitor = 0; //初始值0:监听拖动的盒子可出现 1:显示拖动的盒子 2:不显示拖动的盒子
kelongIndex = -1; //初始值 代表没有被移动的标签
onLoad() {
this.sortList = uni.getStorageSync("sort");
}
//拖动离开事件
tap(e: any) {
console.log("移动下标" this.moveIndex);
if (this.moveIndex != -1) {
var list: any = this.kelongList;
this.sortList.splice(this.moveIndex, 0, list[0]);
this.kelongList = {};
this.monitor = 2;
//确保不出现空
for (let i = 0; i < this.sortList.length; i ) {
if (this.sortList[i] == null || this.sortList[i] == undefined) {
this.sortList.splice(i, 1);
continue;
}
}
var a = uni.setStorageSync("sort", this.sortList);
this.moveIndex = -1;
this.kelongIndex = -1;
} else {
var list: any = this.kelongList;
this.sortList.splice(this.kelongIndex, 0, list[0]);
this.kelongList = {};
this.moveIndex = -1;
this.monitor = 2;
this.kelongIndex = -1;
}
}
// 克隆
dragChange(e: any, index: any, item: any) {
//如果有克隆下标,说明上一个移动还没结束,不对其他标签有克隆的点击事件
console.log(index);
if (this.kelongIndex != -1) {
return;
} else {
console.log("kelongIndex:" this.kelongList);
}
this.kelongIndex = index;
this.monitor = 1;
this.pagesX = e.detail.x;
this.pagesY = e.detail.y - 120;
console.log(e.detail.y);
console.log(this.pagesY);
// this.pagesY = parseInt(e.detail.y) - 140;
var list = this.sortList.splice(index, 1);
this.kelongList = list;
}
//顶置
overheadChange(e: any, index: any, item: any) {
this.classClass = 1;
var list = this.sortList.splice(index, 1);
this.sortList.unshift(list[0]);
var a = uni.setStorageSync("sort", this.sortList);
}
onChange(e: any) {
this.old.x = e.detail.x;
this.old.y = e.detail.y;
for (var i = 0; i < 40; i ) {
var start = i * 35;
var end = (i 1) * 35;
if (this.old.y >= start && this.old.y < end) {
this.moveIndex = i;
break;
}
}
}
}
</script>
<style lang="less" scoped>
.move_null {
width: 100%;
height: 80rpx;
// background-color: aqua;
}
.list_bottom {
background-color: #f7f3f3;
width: 100%;
height: 80rpx;
}
movable-area {
movable-view {
width: 100%;
}
width: 100%;
height: 100%;
.moveBox {
height: 80rpx;
padding: 20rpx 30rpx 0 30rpx;
}
}
.topBox {
font-size: 28rpx;
text-align: left;
.Overhead {
margin-right: 100rpx;
}
}
.container {
background-color: white;
.conBox {
align-items: center;
height: 80rpx;
font-size: 28rpx;
text-align: left;
border-bottom: 1px solid rgb(244, 242, 242);
.Over {
margin-right: 150rpx;
width: 48rpx;
height: 48rpx;
font-size: 48rpx;
}
.sort {
margin-right: 20rpx;
width: 48rpx;
height: 48rpx;
image {
width: 48rpx;
height: 48rpx;
}
}
}
}
</style>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgccaec
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01