docs: swiper 可通过 css 的 touch-action 设置用户操作行为 #2630
Conversation
Walkthrough此次更改主要集中在 Changes
Possibly related PRs
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (13)
src/packages/swiper/doc.md (5)
15-16: 很好的补充说明，建议稍作改进这个关于 CSS
touch-action属性的说明非常有价值，它为用户提供了控制触摸行为的重要信息。为了使说明更加清晰，建议稍作改进：
- 可以简要解释一下为什么这个属性对 Swiper 组件很重要。
- 考虑提供一个简单的代码示例，展示如何在 Swiper 组件中使用这个属性。
Line range hint
24-36: 示例更新得当，建议小幅优化基础用法示例的更新很好地展示了 Swiper 组件的更多特性，尤其是：
- 添加了
slideSize和indicator属性，展示了更多配置选项。- 使用 CSS 变量来自定义样式是一个很好的做法，提高了组件的灵活性。
为了进一步提升示例的价值，建议：
- 在示例代码下方添加简短说明，解释新添加的属性和 CSS 变量的作用。
- 考虑展示
indicator为false的情况，以对比效果。
Line range hint
180-288: 新增高级用法示例，非常有价值新增的手动切换和自定义分页指示器部分很好地展示了 Swiper 组件的高级用法：
- 手动切换的示例清晰地展示了如何使用
ref来调用prev和next方法。- 自定义分页指示器的示例展示了如何创建自定义的指示器UI。
这些示例对于需要更多控制的用户来说非常有价值。为了进一步提升文档质量，建议：
- 在手动切换的示例中，添加一个简短的说明，解释为什么和何时用户可能需要手动控制轮播。
- 在自定义分页指示器的示例中，可以考虑展示一个更复杂的自定义指示器，比如带有缩略图的指示器，以激发用户的创意。
Line range hint
290-386: 新增布局选项，增强了组件的灵活性新增的垂直方向和居中显示（水平和垂直）的部分很好地展示了 Swiper 组件的布局灵活性：
- 垂直方向的示例清晰地展示了如何使用
direction属性来改变轮播方向。- 居中显示的示例巧妙地使用了 CSS 变量来实现居中效果，这种方法非常灵活。
这些示例对于需要在不同布局中使用 Swiper 的用户来说非常有帮助。为了进一步完善文档，建议：
- 在垂直方向的示例中，可以添加一个注释，说明在什么场景下垂直轮播可能更适合。
- 对于居中显示的示例，可以简要解释
--swiper-offset变量是如何影响布局的，这将帮助用户更好地理解和使用这个特性。
Line range hint
388-421: API 文档更新全面，建议小幅优化Props 和 Ref 表格的更新提供了全面的 API 文档：
- Props 表格新增了多个属性，如
slideSize、direction等，描述清晰。- 新增的 Ref 表格详细说明了可用的方法，这对需要编程控制 Swiper 的开发者很有帮助。
这些更新大大提高了文档的完整性和实用性。为了进一步提升文档质量，建议：
- 在 Props 表格中，考虑为一些属性（如
slideSize、duration）添加单位信息，以避免混淆。- 在 Ref 表格中，可以为每个方法添加一个简单的代码示例，展示如何在实际场景中使用这些方法。
src/packages/swiper/doc.zh-TW.md (3)
15-16: 改进链接格式以提高可读性和遵循Markdown最佳实践新增的内容对于解释如何使用CSS的
touch-action属性来自定义Swiper的用户交互行为非常有价值。然而，可以通过以下方式改进链接的格式：建议将链接格式化为Markdown语法，以提高可读性和遵循最佳实践。例如：
-`Swiper` 透過 CSS 的 `touch-action` 屬性設定使用者的操作行為，如果需要再水平滑動時也可垂直滑動頁面，可透過 `Swiper` 的 `style` 屬性進行設定。 CSS 的`touch-action` 屬性可參考[https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action](https://developer.mozilla.org/zh-CN/ docs/Web/CSS/touch-action) +`Swiper` 透過 CSS 的 `touch-action` 屬性設定使用者的操作行為，如果需要再水平滑動時也可垂直滑動頁面，可透過 `Swiper` 的 `style` 屬性進行設定。 CSS 的`touch-action` 屬性可參考[MDN文档](https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action)这样可以使文档更加清晰和专业。
🧰 Tools
🪛 Markdownlint
15-15: null
Bare URL used(MD034, no-bare-urls)
Line range hint
32-70: 新增属性展示了Swiper组件的增强功能示例代码的更新很好地展示了Swiper组件的新功能，特别是
effect和direction属性的使用。这些变更有效地演示了组件的新特性。为了进一步提高代码的可读性和教育价值，建议在示例代码中添加简短的注释来解释新属性的作用。例如：
<Swiper loop slideSize={300} + // 使用focus效果，并设置缩放比例为0.9 + effect={{ name: 'focus', scale: 0.9 }} > {list.map((item, index) => { return ( <Swiper.Item key={item}> <img src={list[index]} alt={list[index]} draggable={false} /> </Swiper.Item> ) })} </Swiper>这样可以帮助用户更快地理解新属性的用途和效果。
🧰 Tools
🪛 Markdownlint
15-15: null
Bare URL used(MD034, no-bare-urls)
Line range hint
330-355: 垂直方向示例有效展示了Swiper的多样性新增的垂直方向示例很好地展示了Swiper组件的灵活性，允许用户在垂直方向上使用轮播功能。这个例子简洁明了，有效地演示了如何使用
direction属性来改变Swiper的方向。为了使示例更加informative，建议在代码注释中简要说明垂直方向的特点和用途。例如：
const App = () => { return ( <div className="demo-box vertical-center" style={{ height: '150px' }}> + {/* 使用direction="vertical"实现垂直方向的轮播，适用于限宽场景或特殊布局需求 */} <Swiper loop direction="vertical"> {list.map((item, index) => { return ( <Swiper.Item key={item}> <img src={list[index]} alt={list[index]} draggable={false} /> </Swiper.Item> ) })} </Swiper> </div> ) }这样的注释可以帮助用户更好地理解垂直方向轮播的应用场景和优势。
🧰 Tools
🪛 Markdownlint
15-15: null
Bare URL used(MD034, no-bare-urls)
src/packages/swiper/doc.en-US.md (5)
15-15: 新增的 touch-action 说明很有价值这个新增的说明对于需要在水平滑动的同时控制垂直滚动的用户来说非常有用。这有助于提高组件的灵活性和用户体验。
建议在说明中添加一个简单的代码示例，展示如何在 Swiper 组件上设置
touch-action样式，以便用户更容易理解和应用。
Line range hint
52-77: 新增的焦点效果演示很棒这个新的演示示例很好地展示了 Swiper 组件的高级视觉效果功能。使用
effect属性和focus效果，以及scale参数，为用户提供了创建更吸引人的轮播图的方法。建议在代码示例旁边添加一个简短的文字说明，解释
effect属性的作用和可能的值，这样可以帮助用户更好地理解如何自定义这些效果。
Line range hint
81-115: 异步加载示例是个很好的补充这个新增的异步加载示例非常有价值，它展示了如何在 Swiper 组件中处理动态内容加载。这对于需要从 API 获取数据或延迟加载内容的场景很有帮助。
在代码示例中，有一个小错误需要修正。在渲染 Swiper.Item 时，使用了
list[index]，但应该使用asyncList[index]。建议修改这个错误以确保示例的正确性。
Line range hint
201-275: 手动切换功能的演示很实用新增的手动切换部分很好地展示了如何使用
ref来控制 Swiper 组件。这对于需要创建自定义导航或与其他UI元素集成的用户来说非常有用。建议在代码示例中添加一些注释，解释
handlePrev和handleNext函数是如何与 Swiper 的 ref 交互的。这将帮助用户更好地理解手动控制的实现方式。
Line range hint
308-335: 水平居中显示的示例很有创意新增的水平居中显示部分展示了如何创建一个视觉上更吸引人的轮播效果。使用
--swiper-offsetCSS 变量来控制偏移是一个灵活的解决方案。建议在示例代码中添加一个简短的注释，解释
--swiper-offset的作用和如何计算合适的值。这将帮助用户更好地理解如何根据自己的需求调整这个效果。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (3)
- src/packages/swiper/doc.en-US.md (1 hunks)
- src/packages/swiper/doc.md (1 hunks)
- src/packages/swiper/doc.zh-TW.md (1 hunks)
🧰 Additional context used
🪛 Markdownlint
src/packages/swiper/doc.zh-TW.md
15-15: null
Bare URL used(MD034, no-bare-urls)
🔇 Additional comments (4)
src/packages/swiper/doc.zh-TW.md (1)
Line range hint
1-516: 文档更新全面提升了Swiper组件的使用说明本次更新显著提高了Swiper组件文档的质量和完整性。主要亮点包括：
- 新增了关于CSS
touch-action属性的说明，有助于用户更好地控制交互行为。- 引入并演示了新的
effect和direction属性，扩展了组件的功能性。- 添加了垂直方向轮播的示例，展示了组件的多样化用法。
这些改进为用户提供了更全面、更清晰的使用指南，有利于提高开发效率和用户体验。
建议考虑以下小改进，以进一步提升文档质量：
- 统一使用Markdown链接语法，避免使用裸URL。
- 在示例代码中添加简短注释，解释新属性的作用和应用场景。
- 考虑为新增的特性添加一个简短的"新功能"或"更新"标记，以便用户快速识别最新变化。
总的来说，这次更新大大增强了Swiper组件的文档，值得赞赏。
🧰 Tools
🪛 Markdownlint
15-15: null
Bare URL used(MD034, no-bare-urls)
src/packages/swiper/doc.en-US.md (3)
Line range hint
279-304: 垂直方向的 Swiper 示例很有价值新增的垂直方向 Swiper 示例很好地展示了组件的灵活性。这对于需要在垂直布局中使用轮播图的场景非常有用，比如在一些移动应用的信息流中。
示例简洁明了，很好地展示了如何通过
direction属性来改变 Swiper 的方向。这为用户提供了更多的布局选择。
Line range hint
339-366: 垂直居中显示的示例很好地补充了水平居中的例子这个新增的垂直居中显示示例很好地展示了 Swiper 组件在不同方向上的多功能性。它与水平居中的例子形成了很好的对比，为用户提供了更多的布局选择。
示例清晰地展示了如何结合
direction="vertical"和--swiper-offset来创建垂直居中的效果。这对于需要在垂直方向上创建特殊布局的用户来说非常有价值。
Line range hint
1-424: 文档更新总体评价这次对 Swiper 组件文档的更新非常全面和有价值。新增的示例和说明涵盖了多个重要方面，包括基本用法、异步加载、手动控制、不同方向的显示以及居中效果等。这些更新大大提高了文档的实用性和完整性。
主要亮点包括：
- 新增了
touch-action属性的说明，提高了组件的灵活性。- 添加了焦点效果的演示，展示了高级视觉效果。
- 异步加载的示例对处理动态内容很有帮助。
- 手动切换的演示增强了组件的可控性。
- 垂直方向和居中显示的示例展示了组件的多功能性。
总的来说，这些更新将帮助用户更好地理解和使用 Swiper 组件。建议在未来的更新中考虑添加更多的内联注释和解释，以进一步提高文档的可读性和易用性。
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## next #2630 +/- ##
==========================================
+ Coverage 82.96% 82.98% +0.02%
==========================================
Files 219 219
Lines 17912 17911 -1
Branches 2547 2548 +1
==========================================
+ Hits 14860 14864 +4
+ Misses 3047 3042 -5
Partials 5 5 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (8)
src/packages/swiper/doc.md (5)
15-16: 很好的补充说明这个新增的说明对于开发者理解如何自定义 Swiper 的交互行为非常有帮助。建议考虑添加一个简单的代码示例，以展示如何在实践中应用
touch-action属性。
Line range hint
29-36: 示例代码更新得当新增的
slideSize和effect属性展示了 Swiper 组件的更多功能，这很好。使用 CSS 变量来自定义样式也是一个很好的做法。建议在示例代码的注释中简要解释这些新属性的作用，以帮助开发者更好地理解。
Line range hint
183-270: 手动切换功能说明清晰新增的手动切换部分很好地展示了如何使用
ref来编程控制 Swiper。示例代码包含了 UI 元素，这有助于开发者理解如何在实际应用中实现这个功能。建议考虑添加一个简短的说明，解释为什么和在什么情况下开发者可能需要使用手动切换功能。
Line range hint
272-357: 方向和居中显示的示例很有价值新增的垂直方向和居中显示（水平和垂直）的部分很好地展示了 Swiper 组件的灵活性。使用 CSS 变量来自定义偏移量是一个很好的做法。建议在每个示例之前添加一个简短的说明，解释这些不同布局在实际应用中的用途，以帮助开发者理解何时使用这些功能。
Line range hint
359-386: API 文档更新全面Props 和 Ref 表格的更新非常全面，新增的属性和方法描述清晰简洁。这对于开发者理解和使用 Swiper 组件非常有帮助。建议考虑为一些较复杂的属性（如
effect）添加更详细的说明或链接到更详细的文档。src/packages/swiper/doc.zh-TW.md (3)
15-16: 改进链接格式以提高可读性和遵循Markdown最佳实践新增的内容对于解释如何使用CSS的
touch-action属性来自定义Swiper的用户交互行为非常有价值。然而，可以通过以下方式改进链接的格式：建议将链接格式化如下：
-CSS 的`touch-action` 屬性可參考[https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action](https://developer.mozilla.org/zh-CN/ docs/Web/CSS/touch-action) +CSS 的`touch-action` 屬性可參考[MDN文档](https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action)这样可以提高文档的可读性并遵循Markdown的最佳实践。
🧰 Tools
🪛 Markdownlint
15-15: null
Bare URL used(MD034, no-bare-urls)
Line range hint
52-54: 新属性展示了Swiper组件的高级功能基础用法示例的更新很好地展示了Swiper组件的新功能，特别是
effect和direction属性。这些变更有效地演示了组件的高级特性。为了进一步提高代码的可读性和教育价值，建议添加简短的注释来解释新属性的作用。例如：
<Swiper loop slideSize={300} + // 添加焦点效果，使当前滑块稍大一些 effect={{ name: 'focus', scale: 0.9 }} + // 设置为垂直方向滑动 + direction="vertical" >这些注释将帮助用户更好地理解这些新属性的用途和效果。
🧰 Tools
🪛 Markdownlint
15-15: null
Bare URL used(MD034, no-bare-urls)
Line range hint
265-268: 手动切换示例的更新提高了功能准确性手动切换示例的更新很好地展示了如何使用ref来控制Swiper，并修复了当前索引跟踪的潜在问题。这个改进增强了示例的准确性和实用性。
为了提高代码的一致性，建议稍微调整变量命名：
- const [current2, setCurrent2] = useState(1) + const [current, setCurrent] = useState(1) const onChange3 = (e) => { - setCurrent(e + 1) + setCurrent(e + 1) }这样可以使变量名更加统一，提高代码的可读性。
🧰 Tools
🪛 Markdownlint
15-15: null
Bare URL used(MD034, no-bare-urls)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (2)
- src/packages/swiper/doc.md (1 hunks)
- src/packages/swiper/doc.zh-TW.md (1 hunks)
🧰 Additional context used
🪛 Markdownlint
src/packages/swiper/doc.zh-TW.md
15-15: null
Bare URL used(MD034, no-bare-urls)
🤔 这个变动的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
☑️ 请求合并前的自查清单
Summary by CodeRabbit
新功能
Swiper组件的文档，增加了新特性和使用示例。touch-action属性的使用说明。effect和direction属性，提供了自定义滑动效果和方向的示例。文档更新