【微信小程序-原生开发】列表 - 拖拽排序（官方组件 movable-area 和 movable-view 的用法）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【微信小程序-原生开发】列表 - 拖拽排序（官方组件 movable-area 和 movable-view 的用法）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序拖拽排序,# 微信小程序,# 已归档链接,微信小程序,javascript,前端

index.wxml

<movable-area style="width: 100%;height:{{(dataList.length)*60}}px;">
  <movable-view class="itemBox" style="z-index:{{index == moveId ? 2 : 1}}" wx:for="{{dataList}}" wx:key="index" y="{{item.y}}" direction="all" bind:change="moving" bind:touchend='moved' data-moveid="{{index}}">
    {{item.content}}
  </movable-view>
</movable-area>

index.css

.itemBox {
  background: white;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  padding: 0rpx 20rpx;
  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, .4);
}

index.js

实现逻辑详见代码的注释文章来源地址https://www.toymoban.com/news/detail-680128.html

Page({
  data: {
    // 列表数据
    dataList: [{
        content: "苹果"
      },
      {
        content: "香蕉"
      },
      {
        content: "梨子"
      },
    ],
    // 移动块的id
    moveId: null,
    // 最终停止的位置
    endY: 0,
  },
  onLoad() {
    this.init(this.data.dataList)
  },
  // 重置列表顺序
  init(dataList) {
    // 列表项高度
    const ITEM_HEIGHT = 40
    // 列表项上外边距
    const ITEM_MARGIN_TOP = 14
    let newDataList = dataList.map((item, index) => {
      item.id = index
      // 重置单项的y坐标(组件默认是绝对定位 left:0  top:0 )
      item.y = (ITEM_HEIGHT + ITEM_MARGIN_TOP) * index + ITEM_MARGIN_TOP
      return item
    })

    this.setData({
      dataList: newDataList
    })
  },
  // 移动中-获取移动元素的id,实时获取移动元素的y坐标
  moving(e) {
    this.setData({
      moveId: e.currentTarget.dataset.moveid,
      endY: e.detail.y,
    })
  },
  // 移动后
  moved() {
    let {
      dataList,
      moveId,
      endY
    } = this.data
    let newDataList = JSON.parse(JSON.stringify(dataList))
    newDataList[moveId].y = endY
    newDataList = newDataList.sort((a, b) => a.y - b.y)
    this.init(newDataList)
  }
})