前言

其实很简单只是用了js的几个函数

  1. substr
  2. unshift
  3. splice

完整代码 | mpvue模仿QQ

代码

思路很简单,获取当前元素下标然后通过unshift函数将该值插入到数组第一位,再通过splice函数删除该值

核心代码

 listTop (e) {
const that = this
let index = e.currentTarget.dataset.eventid.substr(e.currentTarget.dataset.eventid.length - 1, 1)
that.messageList.unshift(that.messageList[index])
that.messageList.splice(++index, 1)
}

效果图

mpvue——实现点击数组内的某一元素进行置顶(排序第一)操作的更多相关文章

  1. ROWNUMBER() OVER( PARTITION BY COL1 ORDER BY COL2)用法,先分组,然后在组内排名,分组计算,主表与附表一对多取唯一等

    ROWNUMBER() OVER( PARTITION BY COL1 ORDER BY COL2)用法 今天在使用多字段去重时,由于某些字段有多种可能性,只需根据部分字段进行去重,在网上看到了row ...

  2. 组内Linq培训记录

    注: 由于该培训是在组内分享,先写成了Word,而word中的代码都以截图方式呈现了,而在博客园不能很方便的粘贴截图进来,所以我用插入代码的方式加进来,如果文中说“如下图”或“如下图代码”,那么就直接 ...

  3. sql 分组后 组内排名

    语法:ROW_NUMBER() OVER(PARTITION BY COLUMN ORDER BY COLUMN) 简单的说row_number()从1开始,为每一条分组记录返回一个数字,这里的ROW ...

  4. sql查询技巧,按时间分段进行分组,每半小时一组统计组内记录数量

    今天拿到一个查询需求,需要统计某一天各个时间段内的记录数量. 具体是统计某天9:00至22:00时间段,每半小时内订单的数量,最后形成的数据形式如下: 时间段          订单数 9:00~9: ...

  5. 如何用SQL实现组内前几名的输出

    关于问题 如何查询组内最大的,最小的,大家或许都知道,无非是min.max的函数使用.可是如何在MySQL中查找组内最好的前两个,或者前三个? 什么是相关子查询 在提出对于这个问题的对应方法之前,首先 ...

  6. BIRT实现组内跨行计算

    问题来源:http://developer.actuate.com/community/forum/index.php?/topic/36160-dealing-with-previous-rows- ...

  7. 模拟QQ分组(具有伸缩功能) (添加开源框架的光闪烁效果)SimpleExpandableListAdapter 适配器的用法,并且可添加组及其组内数据。

    package com.lixu.qqfenzu; import java.util.ArrayList; import java.util.HashMap; import java.util.Lis ...

  8. sql server迁移数据(文件组之间的互相迁移与 文件组内文件的互相迁移)

    转自:https://www.cnblogs.com/lyhabc/p/3504380.html?utm_source=tuicool SQLSERVER将数据移到另一个文件组之后清空文件组并删除文件 ...

  9. VUE组内培训

    最近去参加了一个外部VUE的周末培训,加上自己比较感兴趣所以对这项很热的前端框架做了点学习,顺便给组内同事做个简单的分享,希望下次有项目可以使用上- VUE的语法教程网上很多我就不一一列举,截图放一下 ...

随机推荐

  1. Java线程池快速学习教程

    1. Java线程池 线程池:顾名思义,用一个池子装载多个线程,使用池子去管理多个线程. 问题来源:应用大量通过new Thread()方法创建执行时间短的线程,较大的消耗系统资源并且系统的响应速度变 ...

  2. zoj 3812 We Need Medicine (dp 状压)

    先贴一下转载的思路和代码,,,:http://blog.csdn.net/qian99/article/details/39138329 状压dp博大精深啊,以后看到n<=50都可以往状压上想, ...

  3. shell的case脚本的简单入门

    shell的case脚本的简单入门 示例1: #/bin/bash a=$ case "$a" in ") echo 'hell 2';; ") echo 'h ...

  4. 解决maven无法下载依赖的jar包的问题

    背景: 公司内部有搭建maven私服,自己做了个核心jar包,一开始是xxx-core.1.0.0.SNAPSHOT版本,是本地和项目环境都可以正常使用的.为支持上线,发布稳定版本,xxx-core. ...

  5. 50 个 Bootstrap 插件

    Bootstrap是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. 本文向你 ...

  6. 在Ubuntu 10.10下安装JDK配置Eclipse及Tomcat

    1.安装JDK 1.1.到官网下载相关的JDK 这里下载的是 jdk-6u23-linux-i586.bin. 下载地址:http://www.oracle.com/technetwork/java/ ...

  7. 空暇时候思考2(&#39;\0&#39;等价于数字0还是字符0)

    /********************************************************************** * * Copyright (c)2015,WK Stu ...

  8. BUPT复试专题—最小距离查询(2013)

    题目描述 给定一个由小写字母a到z组成的字符串S,其中第i个字符为S[i](下标从0开始).你需要完成下面两个操作:INSERT c  其中c是一个待输入的字符.你需要在字符串的末尾添加这个字符.保证 ...

  9. 【转】利用shell命令操作Memcached

    原文: 张宴的博客 —— http://zyan.cc/post/384/ -------------------------------------------------------------- ...

  10. 转:一个android开发者独立开发社交app全过程

    http://www.cnblogs.com/linguanh/p/5683069.html