本文实例为大家分享了微信小程序实现列表项上移下移的具体代码,供大家参考,具体内容如下
需要实现的效果:点击向下按钮时所选项内容和下一项内容交换,向上按钮则相反,删除按钮则点击时删除所选项那一列内容
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] }
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理