Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(Swiper): add two new informal event funs #1438

Merged
merged 1 commit into from
Jun 7, 2024

Conversation

anlyyao
Copy link
Collaborator

@anlyyao anlyyao commented Jun 7, 2024

🤔 这个 PR 的性质是?

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

🔗 相关 Issue

💡 需求背景和解决方案

背景:目前 swiper 仅提供 change 和 click 事件,change 事件的触发时机是拖动后,click事件是点击时(两个事件触发时,动画实际还未完成),为方便用护在动画完成后在触发其他事件,新增 transitionenter 和 transitionleave 两个事件。(这两个事件名称和参数可能存在变更,是非正式的,因此暂时不在API文档中暴露,仅在组件内部支持。)

📝 更新日志

  • feat(Swiper): 新增 transitionentertransitionleave 两个事件

  • 本条 PR 不需要纳入 Changelog

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

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

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

@anlyyao
Copy link
Collaborator Author

anlyyao commented Jun 7, 2024

// 示例
<template>
  <div style="padding: 0 16px">
    <t-swiper
      :navigation="{ type: 'dots' }"
      :autoplay="true"
      @click="handleClick"
      @change="handleChange"
      @transitionenter="handletransitionenter"
      @transitionleave="handletransitionleave"
    >
      <t-swiper-item v-for="(item, index) in swiperList" :key="index" style="height: 192px">
        <img :src="item" class="img" />
      </t-swiper-item>
    </t-swiper>
  </div>
</template>
<script lang="ts" setup>
const imageCdn = 'https://tdesign.gtimg.com/mobile/demos';
const swiperList = [
  `${imageCdn}/swiper1.png`,
  `${imageCdn}/swiper2.png`,
  `${imageCdn}/swiper1.png`,
  `${imageCdn}/swiper2.png`,
  `${imageCdn}/swiper1.png`,
];

const handleChange = (index: number, context: any) => {
  console.log('基础示例,页数变化到》》》', index, context);
};

const handleClick = (value: number) => {
  console.log('click: ', value);
};

const handletransitionenter = (event: any) => {
  console.log('----', '动画开始', event);
};

const handletransitionleave = (event: any) => {
  console.log('----', '动画结束', event);
};
</script>

<style>
img {
  display: block;
  width: 100%;
  height: 192px;
}
</style>

Copy link
Contributor

github-actions bot commented Jun 7, 2024

完成

@anlyyao anlyyao merged commit 29f558f into develop Jun 7, 2024
12 checks passed
@anlyyao anlyyao deleted the feat/swiper/transion-event branch June 7, 2024 08:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants