JS实现上移、下移、置顶、置底、删除功能的实现 |
您所在的位置：网站首页 › word文本框怎么下移 › JS实现上移、下移、置顶、置底、删除功能的实现 |
JS实现上移、下移、置顶、置底、删除功能的实现
|
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代码： 置顶 上移 下移 置底 删除 新增活动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 )： 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; } }
|
【本文地址】
今日新闻 |
推荐新闻 |