拼多多排行榜 vue.js

vue配合animate

data(){ return { otherList: [ { order: 4, id:1, word: "小明1", time: "21`15`234", src: "@/assets/bg_cjfx.jpg" }, { order: 5, id:2, word: "小明2", time: "21`15`234", src: "@/assets/bg_cjfx.jpg" }, { order: 6, id:3, word: "小明", time: "21`15`234", src: "@/assets/bg_cjfx.jpg" }, { order: 7, id:4, word: "小明4", time: "21`15`234", src: "@/assets/bg_cjfx.jpg" }, { order: 8, id:5, word: "小明5", time: "21`15`234", src: "@/assets/bg_cjfx.jpg" }, { order: 9, id:6, word: "小明666", time: "21`15`234", src: "@/assets/bg_cjfx.jpg" }, { order: 10, id:7, word: "小明777", time: "21`15`234", src: "@/assets/bg_cjfx.jpg" } ], length: "", nowIndex: "", preIndex: "" }}

【拼多多排行榜】方法

moveFunc(moveItem) { this.length = this.otherList.length; this.nowIndex = this.otherList.findIndex( item => item.id == moveItem.id ); if (this.nowIndex > -1) { this.preIndex = this.nowIndex - 1; } let nowItem = {}; let beforeItem = {}; if (this.nowIndex > -1) { beforeItem = this.otherList[this.preIndex]; nowItem = this.otherList[this.nowIndex]; this.$set(nowItem,'order',moveItem.order) if (nowItem.order <= beforeItem.order) { this.$set(beforeItem,'order',beforeItem.order+1) nowItem = this.otherList.splice(this.nowIndex, 1)[0]; this.otherList.splice(this.preIndex, 0, nowItem); this.downMoveClass(beforeItem); this.upMoveClass(nowItem); setTimeout(()=>{ this.moveFunc(moveItem) },400) }else { return false } } else { this.otherList.splice(this.length, 0, moveItem); this.upMoveClass(moveItem); } }, downMoveClass(downItem) { let str = `ref${downItem.order}`; this.$nextTick(() => { this.$refs[str][0].setAttribute( "class", "animate__animated animate__fadeInDown" ); }); }, upMoveClass(addItem) { let str = `ref${addItem.order}`; this.$nextTick(() => { this.$refs[str][0].removeAttribute( "class", "animate__animated animate__fadeInUp" ); this.$refs[str][0].setAttribute( "class", "animate__animated animate__fadeInUp" ); }); },//启动动画 this.$refs.actionItem[0].moveFunc({ order: 4, id:7, word: "小红666", time: "21`15`234", src: "@/assets/bg_cjfx.jpg" });