微信小程序实现列表项上移下移效果

本文实例为大家分享了微信小程序实现列表项上移下移的具体代码，供大家参考，具体内容如下

需要实现的效果：点击向下按钮时所选项内容和下一项内容交换，向上按钮则相反，删除按钮则点击时删除所选项那一列内容

index.wxml

<view class="subject" wx:for="{{sublist}}" wx:key="index">
?? ?<view>{{index+1}}.{{item}}</view>
?? ?<view class="btns">
?? ??? ?<view class="btn up" wx:if="{{index>0}}" data-i="{{index}}" bindtap="up">??</view>
?? ??? ?<view class="btn down" wx:if="{{index<sublist.length-1}}" data-i="{{index}}" bindtap="down">??</view>
?? ??? ?<view class="btn del" data-i="{{index}}" bindtap="del">X</view>
?? ?</view>
</view>

index.wxss

.subject{
? display: flex;
? justify-content: space-between;
? align-items: center;
? padding: 0 40rpx;
}
.btns{
? margin: 20rpx 20rpx;
}
.btn{
? width: 60rpx;
? height: 60rpx;
? border: 1px solid #ccc;
? border-radius: 50%;
?align-items: center;
?justify-content: center;
?text-align: center;
?color: #fff;
?line-height: 60rpx;
?margin: 10rpx 0;
}
?
?.up{
? background: rgba(255, 182, 47, 0.842);
}
?.down{
? background: skyblue;
}
.del{
? background: #eee;
}

index.js 

import {$attr} from 'utils/index' ;//引入utils/index.js 封装的方法
Page({
?
? /**
? ?* 页面的初始数据
? ?*/
? data: {
? ? sublist:[
? ? ? 'AAAAAAAAAAAA',
? ? ? 'BBBBBBBBBBBBBB',
? ? ? 'CCCCCCCCCCCCC',
? ? ? 'DDDDDDDDDDD'
? ? ]
? },
? del(e){
? ? let i=$attr(e,'i')
? ? this.data.sublist.splice(i,1)
? ? this.setData({
? ? ? sublist:this.data.sublist
? ? })
? },
? up(e){
? ? let i=$attr(e,'i')
? ? let temp=this.data.sublist[i]
? ? this.data.sublist[i]=this.data.sublist[i-1]
? ? this.data.sublist[i-1]=temp
? ? this.setData({
? ? ? sublist:this.data.sublist
? ? })
? },
? down(e){
? ? let i=$attr(e,'i')
? ? let temp=this.data.sublist[i]
? ? this.data.sublist[i]=this.data.sublist[i+1]
? ? this.data.sublist[i+1]=temp
? ? this.setData({
? ? ? sublist:this.data.sublist
? ? })
? },
?
})

utils/index.js 

export function $attr(e, key) {
? return e.currentTarget.dataset[key]
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现列表项上移下移效果的详细内容...