微信小程序实现列表项上移下移效果
作者：asteriaV
这篇文章主要为大家详细介绍了微信小程序实现列表项上移下移效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序实现列表项上移下移的具体代码，供大家参考，具体内容如下
需要实现的效果：点击向下按钮时所选项内容和下一项内容交换，向上按钮则相反，删除按钮则点击时删除所选项那一列内容
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]
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。