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

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

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

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

猜你喜欢

• JavaScript隐藏option元素的方法是什么？

  JavaScript隐藏option元素的方法是什么？对于实现隐藏option元素，首先我们需要获取指定option对象，然后在使用option对象.style.display="none语句将指定option选项隐藏即可，那么具体怎样实现呢？文中有示例供大家参考，感兴趣的朋友可以了解看看。

• JS实现轮播有哪些要点，具体怎样做的

  1、div宽度直接与浏览器界面宽度一致：width:100%2、怎么让图片在一个绝对定位的盒子中垂直居中显示？继续加绝对定位。然后改变top，和left的值3、采用外置的js文件，需要等到页面加载完毕：window.οnlοad=function(){}4、添加和移除元素的类名：先获取DOM对象，然后通过classLi

• Bootstrap网格布局怎样实现垂直和水平对齐？

  这前有篇文章跟大家聊了Bootstrap网格系统，这篇文章给大家分享Bootstrap网格布局实现垂直和水平对齐的内容。小编觉得挺实用的，因此分享给大家做个参考，接下来一起跟随小编看看吧。

• JavaScript语言开发怎么做好优化工作，有哪些技巧

  本篇文章我们一起来看一下JavaScript的18个优化技巧，适合所有正在使用 JavaScript 编程的开发人员阅读，本文的目的在于帮助大家更加熟练的运用 JavaScript 语言来进行开发工作，希望对大家有帮助。

• JS中的History历史对象的用法是什么

  JS中的History历史对象的用法是什么？JavaScript编程中的History历史对象是一定要学习的基本内容，想要了解详细知识点，可以跟随小编来了解下。