feat(swipe-cell): support dragstart and dragend events

[Lyan-u]

🤔 这个 PR 的性质是？

• 日常 bug 修复
• 新特性提交
• 文档改进
• 演示代码改进
• 组件样式/交互改进
• CI/CD 改进
• 重构
• 代码风格优化
• 测试用例
• 分支合并
• 其他

🔗 相关 Issue

fix #2804
API变更: TDesignOteam/tdesign-api#312

💡 需求背景和解决方案

新增 dragstart 和 dragend 事件，在拖拽过程中禁用下拉刷新

📝 更新日志

• feat(SwipeCell): 新增 dragstart 和 dragend 事件

• feat(PullDownRefresh): 新增 disabled 属性

• 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

• 文档已补充或无须补充
• 代码演示已提供或无须提供
• TypeScript 定义已补充或无须补充
• Changelog 已提供或无须提供

[anlyyao]

swipe-cell 暂且适配skyline，直接引入会导致已开启skyline的pages/pull-down-refresh/skyline/pull-down-refresh 页面异常，暂时移除该示例。

示例关键代码如下：

Component({
  data: {
    enable: false,
    loadingProps: {
      size: '50rpx',
    },
    rowCol1: [{ width: '100%', height: '342rpx', borderRadius: '24rpx' }],
    rowCol2: [[{ width: '327rpx' }], [{ width: '200rpx' }], [{ size: '327rpx', borderRadius: '24rpx' }]],
    scrollTop: 0,
    disabled: false,
  },

  ready() {
    this.setData({ enable: true });
    setTimeout(() => {
      this.setData({ enable: false });
    }, 1000);
  },

  methods: {
    onRefresh() {
      this.setData({ enable: true });
      setTimeout(() => {
        this.setData({ enable: false });
      }, 1500);
    },
    onScroll(e) {
      const { scrollTop } = e.detail;
      this.setData({ scrollTop });
    },
    onSwipeCellDragStart() {
      // 拖拽滑动操作时禁用下拉刷新
      this.setData({ disabled: true });
    },
    onSwipeCellDragEnd() {
      wx.nextTick(() => {
        this.setData({ disabled: false });
      });
    },
  },
});

{
  "component": true,
  "usingComponents": {
    "t-pull-down-refresh": "tdesign-miniprogram/pull-down-refresh/pull-down-refresh",
    "t-skeleton": "tdesign-miniprogram/skeleton/skeleton",
    "t-back-top": "tdesign-miniprogram/back-top/back-top",
    "t-swipe-cell": "tdesign-miniprogram/swipe-cell/swipe-cell",
    "t-cell": "tdesign-miniprogram/cell/cell"
  }
}

<t-pull-down-refresh
  value="{{enable}}"
  loadingProps="{{loadingProps}}"
  loadingTexts="{{['下拉刷新', '松手刷新', '正在刷新', '刷新完成']}}"
  bind:refresh="onRefresh"
  bind:scroll="onScroll"
  disabled="{{disabled}}"
>
  <!-- 包裹页面全部内容 -->
  <view class="demo">
    <view class="demo-title">PullDownRefresh 下拉刷新</view>
    <view class="demo-desc">用于快速刷新页面信息，刷新可以是整页刷新也可以是页面的局部刷新。</view>
    <t-swipe-cell class="demo-swipe-cell" bind:dragstart="onSwipeCellDragStart" bind:dragend="onSwipeCellDragEnd">
      <t-cell title="左滑单操作" note="辅助信息" bordered="{{false}}" />
      <view slot="right" class="btn delete-btn">删除</view>
    </t-swipe-cell>
    <view class="pulldown-reflesh__content">
      <t-skeleton rowCol="{{rowCol1}}" loading></t-skeleton>
      <view class="row">
        <t-skeleton rowCol="{{rowCol2}}" loading></t-skeleton>
        <t-skeleton rowCol="{{rowCol2}}" loading></t-skeleton>
      </view>
      <view class="row">
        <t-skeleton rowCol="{{rowCol2}}" loading></t-skeleton>
        <t-skeleton rowCol="{{rowCol2}}" loading></t-skeleton>
      </view>
      <view class="row">
        <t-skeleton rowCol="{{rowCol2}}" loading></t-skeleton>
        <t-skeleton rowCol="{{rowCol2}}" loading></t-skeleton>
      </view>
      <view class="text">拖拽该区域演示 顶部下拉刷新</view>
    </view>
    <t-back-top text="顶部" scroll-top="{{scrollTop}}" visibility-height="{{100}}" />
  </view>
</t-pull-down-refresh>

.demo {
  padding-bottom: 56rpx;
  overflow: hidden;
}

.demo-title {
  font-size: 48rpx;
  font-weight: 700;
  line-height: 64rpx;
  margin: 48rpx 32rpx 0;
  color: var(--td-text-color-primary);
}

.demo-desc {
  font-size: 28rpx;
  color: var(--td-text-color-secondary);
  margin: 16rpx 32rpx 0;
  line-height: 44rpx;
}

.pulldown-reflesh__content {
  margin: 64rpx 32rpx 0;
  position: relative;
}

.row {
  display: flex;
  justify-content: space-between;
  margin-top: 32rpx;
}

.text {
  position: absolute;
  top: 152rpx;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  font-size: 32rpx;
  color: var(--td-text-color-disabled);
  width: 686rpx;
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 120rpx;
  height: 100%;
  color: white;
}

.delete-btn {
  background-color: #e34d59;
}

.demo-swipe-cell {
  margin-top: 10px;
  border-top: 1px solid #f3f3f3;
  border-bottom: 1px solid #f3f3f3;
}