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

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

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

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]
}

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