怎么在小程序中实现上下移动切换位置

在小程序中实现上下移动切换位置通常可以使用两种方式，一种是拖拽排序，另一种是点击按钮进行位置上下移动。下面将对这两种方式的具体实现步骤进行详细介绍。

1. 拖拽排序方式

拖拽排序是一种比较流行的实现方式。其核心思路是通过手指滑动的方式来移动列表项的位置，从而达到上下移动的效果。具体实现步骤如下：

1. 设置一个可拖拽的组件，一般情况下可以使用小程序的movable-view组件实现。需要设置组件的position属性为absolute，同时通过bindchange事件来监听组件的位置变化。

<movable-view 
  class="item" 
  x="{{item.x}}" 
  y="{{item.y}}" 
  direction="all" 
  bindchange="onChangeItemPosition"
  >
    {{item.title}}
</movable-view>

2. 定义一个onchangeItemPosition的方法来监听组件位置的变化，并在方法中实现拖拽排序逻辑。具体实现方式如下：

onChangeItemPosition(e) {
  let {
    items,
    currentIndex
  } = this.data
  let {
    x,
    y
  } = e.detail
  const index = items.findIndex(item => currentIndex == item.id)
  if (index > -1) {
    items[index].x = x
    items[index].y = y
  }
  const sortedItems = sortItems(items)
  const currentItemId = sortedItems.find(item => item.index === currentIndex).id
  this.setData({
    items: sortedItems,
    currentIndex: currentItemId
  })
}

3. 增加一个排序方法sortItems来实现列表项的排序逻辑，一般情况下可以根据列表项的y轴位置来排序。排序实现如下：

function sortItems(items) {
  return items
    .map((item, index) => ({
      ...item,
      index
    }))
    .sort((a, b) => a.y - b.y)
}

4. 在列表项中增加一个触摸事件bindtouchstart，用来记录当前移动的组件的id以及当前组件的位置。还需要增加bindtouchend事件用来清除当前选中的组件id和位置信息。具体实现逻辑如下：

onTouchStart(e) {
  const {
    index,
    x,
    y
  } = e.currentTarget.dataset
  this.setData({
    currentIndex: index,
    startX: e.touches[0].clientX,
    startY: e.touches[0].clientY,
    disX: x - e.touches[0].clientX,
    disY: y - e.touches[0].clientY
  })
}

onTouchEnd(e) {
  this.setData({
    currentIndex: -1,
    startX: 0,
    startY: 0,
    disX: 0,
    disY: 0
  })
}

5. 最后，在组件中增加一个触摸移动事件bindtouchmove用来实现组件的拖拽效果。具体实现逻辑如下：

onTouchMove(e) {
  const {
    startX,
    startY,
    disX,
    disY,
    currentIndex
  } = this.data
  if (currentIndex === -1) {
    return
  }
  const clientX = e.touches[0].clientX
  const clientY = e.touches[0].clientY
  const x = clientX + disX
  const y = clientY + disY
  this.setData({
    items: this.data.items.map(item => ({
      ...item,
      x: item.id === currentIndex ? x : item.x,
      y: item.id === currentIndex ? y : item.y
    }))
  })
}

2. 点击按钮移动方式

点击按钮移动方式是一种比较简单的实现方式。其核心思路是在列表项后面添加上下两个按钮，通过点击按钮来实现列表项的位置移动。具体实现步骤如下：

1. 在列表项后面增加一个位于右侧的按钮组件，用来实现列表项的位置移动；

<view class="item">
  <text>{{item.title}}</text>
  <view class="btn-group">
    <button class="up-btn" data-index="{{index}}" bindtap="onUpBtnClick"></button>
    <button class="down-btn" data-index="{{index}}" bindtap="onDownBtnClick"></button>
  </view>
</view>

2. 在点击事件中获取到当前选中的列表项index，并对其进行上下位置移动。具体实现逻辑如下：

onUpBtnClick(e) {
  const index = e.currentTarget.dataset.index
  const {
    items
  } = this.data
  if (index <= 0) {
    return
  }
  const current = items.splice(index, 1)[0]
  items.splice(index - 1, 0, current)
  this.setData({
    items
  })
}

onDownBtnClick(e) {
  const index = e.currentTarget.dataset.index
  const {
    items
  } = this.data
  if (index >= items.length - 1) {
    return
  }
  const current = items.splice(index, 1)[0]
  items.splice(index + 1, 0, current)
  this.setData({
    items
  })
}

综上所述，以上两种方式都可以实现列表项的位置上下移动。具体选择哪种方式还要根据实际需求进行判断和选择。若是需要一个更加直观的界面交互，那么推荐使用拖拽排序方式；若是需要实现一个简单的列表位置的调整，那么按钮移动方式则更加适合。