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

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

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

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

猜你喜欢

• vue中iview实现分页的代码是什么

  这篇文章主要为大家详细介绍了vue iview实现分页功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• jQuery Ajax书写语法及代码是怎样的？

  AJAX优点是可以异步请求服务器的数据，实现页面数据的实时动态加载， 在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。jquery在全局对象jquery（也就是$）绑定了ajax()函数，可以处理Ajax请求，ajax常用的配置选项有

• JS中this指向怎样理解？一文带你看懂

  这篇文章给大家分享的是JS中this指向问题，this关键字是JavaScript学习中非常重要的语法点，因此本文就给大家来介绍一下，下文有很详细的介绍，有需要的朋友可以参考，接下来就跟随小编来一起学习一下吧！

• React传递参数的方式有哪些？

  React传递参数的方式有哪些？对于React传递参数，有父子组件之间传递参数和路由传参，那么具体怎样实现呢？下面小编给大家分享几个实例，有需要的朋友可以参考。

• 用JS+CSS实现卡片轮播的具体代码是什么

  本文实例为大家分享了js+css实现卡片轮播图效果的具体代码，供大家参考，具体内容如下实现点击的时候切换卡片，自动轮播，鼠标移入暂停，移出继续轮播,有动画事件。效果如下。