更新记录

1.0.0（2023-09-11） 下载此版本

1、列表拖拽

平台兼容性

介绍

子组件使用css tranisition实现动画效果，使用touchstart、touchmove、touchend实现拖拽事件。
*注意：该组件需要仅是上下拖拽，并且需要给出每个item统一固定高度，不满足您的需求请参考全网其他文章。

父组件使用

<template>
  <m-drag :item-height="50" :list="list" @change="dragComplete">
    <template #default="{ item }">
      <view class="name">{{ item.name }}</view>
    </template>
  </m-drag>
</template>

<script setup>
  const list = [
    {
      name: '余额宝支付'
    },
    {
      name: '余额支付'
    },
    {
      name: '建设银行储蓄卡支付'
    },
    {
      name: '农业银行储蓄卡支付'
    }
  ]

  // 拖拽完成
  function dragComplete(newList, dragItem) {
    console.log(newList, dragItem)
  }
</script>

<style lang="scss" scoped>
  .name {
    display: flex;
    align-items: center;
    margin: 0 24rpx;
    height: 50px;
    color: #383838;
    font-size: 30rpx;
    border-bottom: 1px solid #f5f5f5;
  }
</style>

iOS 回弹

在ios设备上，拖拽会触发设备的回弹，页面会跟着拖拽滚动，导致拖拽体验不好，我们需要禁用iOS回弹效果。

微信小程序

在pages.json中，添加属性 "disabledScroll": true

{
  "path": "pages/a/index",
  "style": {
    "navigationBarTitleText": "页面标题",
    "disabledScroll": true
  }
}

支付宝小程序

在pages.json中，添加属性 "allowsBounceVertical": "NO"

{
  "path": "pages/a/index",
  "style": {
    "navigationBarTitleText": "页面标题",
    "allowsBounceVertical": "NO"
  }
}

App

在pages.json中，添加属性 "bounce": "none"

{
  "path": "pages/a/index",
  "style": {
    "navigationBarTitleText": "页面标题",
    "app-plus": {
      "bounce": "none"
    }
  }
}

H5

子组件已经对iOS H5页面回弹，作了处理，具体见 h5BodyScroll