很多朋友都对“微信小程序中实现列表上下移动效果的代码是什么”的内容比较感兴趣，对此小编整理了相关的知识分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获，那么感兴趣的朋友就继续往下看吧！

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

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

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进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• URL特殊转义字符的编码规则是什么及怎么进行编码

  这篇文章主要介绍了网址URL中特殊字符转义编码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

• JS中click事件常用的有哪些，是怎样的

  本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于常用的click事件的相关内容，包括了onclick异步性、同步性、事件触发的先后顺序以及时间注册等内容，下面一起来看一下，希望对大家有帮助。

• Map映射是什么意思，常用方法有哪些

  Map是ES6中新增的数据结构,Map类似于对象,但普通对象的 key 必须是字符串或者数字,而 Map 的 key 可以是任何数据类型,这篇文章主要给大家介绍了关于ECMAScript6中Map映射的基本概念与常用方法,需要的朋友可以参考下

• Node.js安装有没有成功怎样看

  检查nodejs是否安装成功的方法：1、打开“开始”菜单，在程序列表中找到node.js目录及程序，则证明安装成功；2、在cmd命令行中执行“node -v”命令，显示node版本，则证明安装成功。

• Node.JS常用模块有哪些，基本的用法是什么

  一、全局对象常用的全局对象__dirname,__filename__dirname当前模块的目录名，等同于path.dirname(__filename)__filename当前模块的文件名，这是绝对路径。 二、模块讲解1、OS模块varos=require("os");console.log("platform:",os.platform());conso