JS实现上移、下移、置顶、置底、删除功能的实现

最新推荐文章于 2024-10-10 18:07:45 发布

Muchen灬

最新推荐文章于 2024-10-10 18:07:45 发布

阅读量6.8k

点赞数 6

分类专栏： HTML/CSS JavaScript 文章标签： javascript html5

本文链接：https://blog.csdn.net/qq_40976321/article/details/108214702

版权

HTML/CSS 同时被 2 个专栏收录

12 篇文章 4 订阅

订阅专栏

JavaScript

4 篇文章 0 订阅

订阅专栏

1、使用数组splice方法交换位置实现上移、下移、删除功能

2、使用splice、unshift、push方法实现置顶功能

效果展示：

扩展知识点：

（1）push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度

（2）unshift() 方法，可向数组的开头添加一个或多个元素，并返回新的长度

（3）splice() 方法用于添加或删除数组中的元素。注意：这种方法会改变原始数组。

array.splice( index , howmany , item1,.....,itemX)

index：必需。规定从何处添加/删除元素。

howmany：可选。规定应该删除多少元素。必须是数字，但可以是 "0"。

item1, ..., itemX ：可选。要添加到数组的新元素

var fruits = ["Banana", "Orange", "Apple", "Mango"];
// 在下标为2前面插入， "Lemon","Kiwi"  两个元素
fruits.splice(2,0,"Lemon","Kiwi");  
输出：Banana,Orange,Lemon,Kiwi,Apple,Mango


let f = [1,2,3,4,5,6,7,8];
//从0开始，删除3个元素
f.splice(0,3)
输出 ： [4,5,6,7,8]

let f = [1,2,3,4,5,6,7,8];
//从0开始，删除2个元素,并添加 0 ， 0 两个元素 
f.splice(0,2,0,0)
输出 ： [0,0,3,4,5,6,7,8]

let f = [1,2,3,4,5,6,7,8];
//从0开始，删除后面所有元素
f.splice(0)
输出 ： []

功能解析：

（1）上移、下移功能

上移操作的原理：

将当前的index 元素往上移动一位，到 index -1 位置，所以通过splice () 方法，将当前位置的元素添加到index-1 位置中，添加过后数组的长度+1 ，原来index位置往后添加一位，变成 index + 1 , 所以我们需要将 index + 1 位置元素删掉

newList.splice(index - 1, 0, newList[index]);
newList.splice(index + 1, 1);

下移操作的原理：

将当前的index 元素往下移动2位，到 index + 2 位置，所以通过splice () 方法，将当前位置的元素添加到index + 2 位置中，添加过后数组的长度+1 ，往后移时原来index位置并未发生改变, 所以我们需要将 index 位置元素删掉即可

newList.splice(index + 2, 0, newList[index]);
newList.splice(index, 1);

// 上移
upContent(index) {
	if (index == 0) {
		uni.showToast({
		    icon: 'none',
		    title: '已经是第一个了~',
		    duration: 2000
		});
		return;
	}
	let newList = this.contentList;
	//上移操作的原理，将 当前index - 1 的元素前(删除0个元素)添加当前的 index 元素，添加之后长度+1，之后并删除原本index+1 元素
	newList.splice(index - 1, 0, newList[index]);
	newList.splice(index + 1, 1);
	this.contentList = newList;
},

//下移
downContent(index) {
	if (index == this.contentList.length - 1) {
		uni.showToast({
			icon: 'none', 
			title: '已经是最后个了~',
			duration: 2000
		});
		return;
	}
	let newList = this.contentList;
	//下移操作的原理，将 当前index + 2 （往后移动两个下标）的元素前添加当前的 index 元素，并删除原本index 元素
	newList.splice(index + 2, 0, newList[index]);
	newList.splice(index, 1);
	this.contentList = newList;
},

（2）置顶功能

置顶操作的原理，将当前index的元素通过 unshift() 方法添加到数组最前面，添加之后长度+1，之后并删除原本元素下标为（index + 1）

// 置顶
topContent(index) {
	if (index == 0) {
		uni.showToast({
		        icon: 'none', // success / none / loading 3个有效参数
			title: '已经是置顶了~',
			duration: 2000
		});
		return;
	}
	let newList = this.contentList;
	//置顶操作的原理，将 当前index的元素通过unshift()方法添加到数组最前面，添加之后长度+1，之后并删除原本index+1 元素
	newList.unshift(newList[index]);
	newList.splice(index + 1, 1);
	this.contentList = newList;
},

（3）置底功能

置底操作的原理，将当前index元素用push（）添加到数组最后，并删除原本位置index 的元素

//置底
downBottom(index){
	if (index == this.contentList.length - 1) {
	    uni.showToast({
		icon: 'none', 
		title: '已经置底了~',
		duration: 2000
	    });
	    return;
	}
	let newList = this.contentList;
	//置底操作的原理，将 当前index元素 用push（） 添加到数组最后 ，并删除原本index 元素
	newList.push(newList[index]);
	newList.splice(index, 1);
	this.contentList = newList;
},

（4）新增、删除功能

新增就直接使用push()方法添加一个对象{ content:' ' }

删除根据当前传递的下标进行删除

//新增活动
addContent() {
	//新增空白内容
	this.contentList.push({
		content: ''
	});
},

//删除
delContent(index) {
	//删除当前下标元素
	this.contentList.splice(index, 1);
},

HTML代码：


HTML代码：

<!-- 上移下移置顶删除功能 -->
<view class="remove-section">
	<view class="remove-box" v-for="(list,index) in contentList" :key="index">
	<view class="remove-top">
		<view class="top-button" :class=" index == 0 ? 'top-button-no':''" @click="topContent(index)">置顶</view>
		<view class="top-button" :class=" index == 0 ? 'top-button-no':''" @click="upContent(index)">上移</view>
		<view class="top-button" :class=" index == (contentList.length -1) ? 'top-button-no':''" @click="downContent(index)">下移</view>
		<view class="top-button" :class=" index == (contentList.length -1) ? 'top-button-no':''" @click="downBottom(index)">置底</view>
		<view class="top-button" @click="delContent(index)">删除</view>
	</view>
	<view class="remove-content">
	<u-cell-group >
		<u-field label-width="0" v-model="list.content" type="textarea" placeholder="请输入活动内容"></u-field>
		</u-cell-group>
	</view>
</view>

	<u-button type="success" style="margin-top: 15px;" @click="addContent">新增活动</u-button>
</view>

JS代码：

data() {
	return {
	    //内容列表
	    contentList: [{
		content: ''
	    }],
	}
},

methods: {
// 置顶
topContent(index) {
	if (index == 0) {
		uni.showToast({
		        icon: 'none', // success / none / loading 3个有效参数
			title: '已经是置顶了~',
			duration: 2000
		});
		return;
	}
	let newList = this.contentList;
	//置顶操作的原理，将 当前index的元素通过unshift()方法添加到数组最前面，添加之后长度+1，之后并删除原本index+1 元素
	newList.unshift(newList[index]);
	newList.splice(index + 1, 1);
	this.contentList = newList;
},

// 上移
upContent(index) {
	if (index == 0) {
		uni.showToast({
		    icon: 'none',
		    title: '已经是第一个了~',
		    duration: 2000
		});
		return;
	}
	let newList = this.contentList;
	//上移操作的原理，将 当前index - 1 的元素前(删除0个元素)添加当前的 index 元素，添加之后长度+1，之后并删除原本index+1 元素
	newList.splice(index - 1, 0, newList[index]);
	newList.splice(index + 1, 1);
	this.contentList = newList;
},

//下移
downContent(index) {
	if (index == this.contentList.length - 1) {
		uni.showToast({
			icon: 'none', 
			title: '已经是最后个了~',
			duration: 2000
		});
		return;
	}
	let newList = this.contentList;
	//下移操作的原理，将 当前index + 2 （往后移动两个下标）的元素前添加当前的 index 元素，并删除原本index 元素
	newList.splice(index + 2, 0, newList[index]);
	newList.splice(index, 1);
	this.contentList = newList;
},
			
//置底
downBottom(index){
	if (index == this.contentList.length - 1) {
	    uni.showToast({
		icon: 'none', 
		title: '已经置底了~',
		duration: 2000
	    });
	    return;
	}
	let newList = this.contentList;
	//置底操作的原理，将 当前index元素 用push（） 添加到数组最后 ，并删除原本index 元素
	newList.push(newList[index]);
	newList.splice(index, 1);
	this.contentList = newList;
},

//删除
delContent(index) {
	//删除当前下标元素
	this.contentList.splice(index, 1);
},

//新增活动
addContent() {
	//新增空白内容
	this.contentList.push({
		content: ''
	});
},

}

CSS样式( 这里使用的是 scss )：


<style lang="scss" scoped>
	page {
		background-color: #F5F5F5;
	}

	// 上移下移置顶样式
	.remove-section {
		padding: 50rpx 25rpx;
	}

	.remove-box {
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #FFFFFF;
		margin-top: 30rpx;

		.remove-top {
			display: flex;
			position: relative;

			.top-button {
				min-width: 100rpx;
				width: 100rpx;
				height: 50rpx;
				font-size: 24rpx;
				line-height: 50rpx;
				text-align: center;
				border-radius: 10rpx;
				border: 1rpx solid #777777;
				margin-right: 30rpx;
			}

			//单独设置最后一个元素样式
			.top-button:last-child {
				position: absolute;
				top: 0;
				right: 0;
				margin-right: 0;
			}

			//不可点击状态
			.top-button-no {
				border-color: #CCCCCC;
				color: #CCCCCC;
			}
		}

		// 内容区
		.remove-content {
			margin-top: 20rpx;
			background-color: #F1F1F1;
			border-radius: 10rpx;
			padding: 20rpx;
			font-size: 28rpx;
			color: #161616;
			line-height: 45rpx;
		}

		// 去除u-field的边框
		.u-field-border::after {
			border-bottom: none;
		}

		//设置u-field输入框背景色
		.u-field {
			background-color: #F1F1F1;
			padding: 0;
		}
	}
</style>