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

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

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

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中$refs怎么使用，有哪些坑使用时要注意

  这篇文章主要介绍了Vue 实例中使用$refs的注意事项，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

• 用jQuery如何做任意点击隐藏div的效果

  方法：1、给body元素绑定点击事件并指定事件处理函数，语法为“$("body").click(function())”；2、在事件处理函数中，利用hide()方法实现点击任何地方隐藏div效果，语法为“$("div").hide();”。

• JavaScript的特点是什么，有哪些基础用法要掌握

  本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于基础语法的相关问题，JavaScript是互联网上最流行的脚本语言，下面就一起来看一下，希望对大家有帮助。

• vue浏览器返回监听怎样实现？步骤是什么？

  我们在做分享页面的时候，会需要使用到vue浏览器返回监听，这样可以实现用户分享完页面之后，回退按钮返回到首页功能，达到实现增加访问量的目的。但是vue浏览器返回监听具体要怎么做呢？下面我们一起来了解一下实现步骤。

• JS的Window窗口对象怎样用，有哪些属性和方法

  JS的Window窗口对象怎样用，有哪些属性和方法？下文有实例供大家参考，对大家了解操作过程或相关知识有一定的帮助，而且实用性强，希望这篇文章能帮助大家，下面我们一起来了解看看吧。