微信小程序实现列表项上移下移效果
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了微信小程序实现列表项上移下移的具体代码，供大家参考，具体内容如下
需要实现的效果：点击向下按钮时所选项内容和下一项内容交换，向上按钮则相反，删除按钮则点击时删除所选项那一列内容
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]
}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
