admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +08:00
Code Issues Packages Projects Releases Wiki Activity
wot-design-uni/component/swiper.html

213 lines
172 KiB
HTML
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Swiper 轮播 | Wot UI</title>
<meta name="description" content="一个参照wot-design打造的uni-app组件库">
<meta name="generator" content="VitePress v1.6.3">
<link rel="preload stylesheet" href="/assets/style.DE99STDd.css" as="style">
<link rel="preload stylesheet" href="/vp-icons.css" as="style">
<script type="module" src="/assets/app.Dbjtrbcu.js"></script>
<link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/assets/chunks/theme.BptUtxMC.js">
<link rel="modulepreload" href="/assets/chunks/framework.C7RrxATG.js">
<link rel="modulepreload" href="/assets/component_swiper.md.DaYLlpEs.lean.js">
<link rel="icon" href="/favicon.ico">
<script>var _hmt=_hmt||[];(function(){var e=document.createElement("script");e.src="https://hm.baidu.com/hm.js?c77588a5308ea5813c1d46bdd849338b";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();</script>
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-0265fbf3><!--[--><!----><!--]--><!--[--><span tabindex="-1" data-v-820c3f27></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-820c3f27>Skip to content</a><!--]--><!----><header class="VPNav" data-v-0265fbf3 data-v-17d76767><div class="VPNavBar has-sidebar top" data-v-17d76767 data-v-0850eeb5><div class="wrapper" data-v-0850eeb5><div class="container" data-v-0850eeb5><div class="title" data-v-0850eeb5><div class="VPNavBarTitle has-sidebar" data-v-0850eeb5 data-v-5efaa3d5><a class="title" href="/" data-v-5efaa3d5><!--[--><!--]--><!--[--><img class="VPImage logo" src="/logo.png" alt data-v-28aabeee><!--]--><span data-v-5efaa3d5>Wot UI</span><!--[--><!--[--><!--[--><!--[--><span class="el-tag el-tag--primary el-tag--small el-tag--plain" style="vertical-align:middle;margin-left:8px;" text><span class="el-tag__content"><!--[-->1.13.0<!--]--></span><!--v-if--></span><!--]--><!--]--><!--]--><!--]--></a></div></div><div class="content" data-v-0850eeb5><div class="content-body" data-v-0850eeb5><!--[--><!--]--><div class="VPNavBarSearch search" data-v-0850eeb5><!--[--><!----><div id="docsearch"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-0850eeb5 data-v-226f0211><span id="main-nav-aria-label" class="visually-hidden" data-v-226f0211> Main Navigation </span><!--[--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-226f0211 data-v-276a3a8f><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-276a3a8f><span class="text" data-v-276a3a8f><!----><span data-v-276a3a8f>指南</span><span class="vpi-chevron-down text-icon" data-v-276a3a8f></span></span></button><div class="menu" data-v-276a3a8f><div class="VPMenu" data-v-276a3a8f data-v-6a9ff74b><div class="items" data-v-6a9ff74b><!--[--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/introduction.html" data-v-796a4fac><!--[--><span data-v-796a4fac>介绍</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/quick-use.html" data-v-796a4fac><!--[--><span data-v-796a4fac>快速上手</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/cli-templates.html" data-v-796a4fac><!--[--><span data-v-796a4fac>脚手架与模板</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/consultation.html" data-v-796a4fac><!--[--><span data-v-796a4fac>咨询服务</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/custom-theme.html" data-v-796a4fac><!--[--><span data-v-796a4fac>定制主题</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/common-problems.html" data-v-796a4fac><!--[--><span data-v-796a4fac>常见问题</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/locale.html" data-v-796a4fac><!--[--><span data-v-796a4fac>国际化</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/changelog.html" data-v-796a4fac><!--[--><span data-v-796a4fac>更新日志</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/cases.html" data-v-796a4fac><!--[--><span data-v-796a4fac>⭐ 案例</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/guide/join-group.html" data-v-796a4fac><!--[--><span data-v-796a4fac>加群沟通</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup active" data-v-226f0211 data-v-276a3a8f><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-276a3a8f><span class="text" data-v-276a3a8f><!----><span data-v-276a3a8f>组件</span><span class="vpi-chevron-down text-icon" data-v-276a3a8f></span></span></button><div class="menu" data-v-276a3a8f><div class="VPMenu" data-v-276a3a8f data-v-6a9ff74b><div class="items" data-v-6a9ff74b><!--[--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/component/button.html" data-v-796a4fac><!--[--><span data-v-796a4fac>基础组件</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/component/pagination.html" data-v-796a4fac><!--[--><span data-v-796a4fac>导航组件</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/component/calendar.html" data-v-796a4fac><!--[--><span data-v-796a4fac>数据输入</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/component/action-sheet.html" data-v-796a4fac><!--[--><span data-v-796a4fac>反馈组件</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link" href="/component/badge.html" data-v-796a4fac><!--[--><span data-v-796a4fac>数据展示</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/reward/reward.html" tabindex="0" data-v-226f0211 data-v-18672fa5><!--[--><span data-v-18672fa5>🥤一杯咖啡</span><!--]--></a><!--]--><!--[--><a class="VPLink link vp-external-link-icon VPNavBarMenuLink" href="https://blog.wot-ui.cn/" target="_blank" rel="noreferrer" tabindex="0" data-v-226f0211 data-v-18672fa5><!--[--><span data-v-18672fa5>博客</span><!--]--></a><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-226f0211 data-v-276a3a8f><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-276a3a8f><span class="text" data-v-276a3a8f><!----><span data-v-276a3a8f>模板</span><span class="vpi-chevron-down text-icon" data-v-276a3a8f></span></span></button><div class="menu" data-v-276a3a8f><div class="VPMenu" data-v-276a3a8f data-v-6a9ff74b><div class="items" data-v-6a9ff74b><!--[--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://starter.wot-ui.cn/" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>快速上手模板 wot-starter</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://vitesse-docs.netlify.app/" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>vitesse-uni-app</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://github.com/wot-ui/wot-starter-retail" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>wot-starter-retail</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://unibest.tech/" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>unibest</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="VPFlyout VPNavBarMenuGroup" data-v-226f0211 data-v-276a3a8f><button type="button" class="button" aria-haspopup="true" aria-expanded="false" data-v-276a3a8f><span class="text" data-v-276a3a8f><!----><span data-v-276a3a8f>资源</span><span class="vpi-chevron-down text-icon" data-v-276a3a8f></span></span></button><div class="menu" data-v-276a3a8f><div class="VPMenu" data-v-276a3a8f data-v-6a9ff74b><div class="items" data-v-6a9ff74b><!--[--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://starter.wot-ui.cn/" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>快速上手模板</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://marketplace.visualstudio.com/items?itemName=wot-ui.wot-ui-intellisense" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>VS Code 代码提示插件</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://moonofweisheng.github.io/uni-mini-router/" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>Vue3 uni-app路由库</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://github.com/Moonofweisheng/uni-mini-ci" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>多平台小程序CI工具</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://uni-helper.js.org/" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>Uni Helper</span><!--]--></a></div><!--]--><!--[--><div class="VPMenuLink" data-v-6a9ff74b data-v-796a4fac><a class="VPLink link vp-external-link-icon" href="https://github.com/uni-ku" target="_blank" rel="noreferrer" data-v-796a4fac><!--[--><span data-v-796a4fac>uni-ku</span><!--]--></a></div><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><div class="VPFlyout VPNavBarTranslations translations" data-v-0850eeb5 data-v-c7b0e7c4 data-v-276a3a8f><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="Change language" data-v-276a3a8f><span class="text" data-v-276a3a8f><span class="vpi-languages option-icon" data-v-276a3a8f></span><!----><span class="vpi-chevron-down text-icon" data-v-276a3a8f></span></span></button><div class="menu" data-v-276a3a8f><div class="VPMenu" data-v-276a3a8f data-v-6a9ff74b><!----><!--[--><!--[--><div class="items" data-v-c7b0e7c4><p class="title" data-v-c7b0e7c4>简体中文</p><!--[--><div class="VPMenuLink" data-v-c7b0e7c4 data-v-796a4fac><a class="VPLink link" href="/en-US/component/swiper.html" data-v-796a4fac><!--[--><span data-v-796a4fac>English</span><!--]--></a></div><!--]--></div><!--]--><!--]--></div></div></div><div class="VPNavBarAppearance appearance" data-v-0850eeb5 data-v-7042c56b><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-7042c56b data-v-c7ba4725 data-v-5c03db5c><span class="check" data-v-5c03db5c><span class="icon" data-v-5c03db5c><!--[--><span class="vpi-sun sun" data-v-c7ba4725></span><span class="vpi-moon moon" data-v-c7ba4725></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-0850eeb5 data-v-39bcb251 data-v-c6225e3a><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Moonofweisheng/wot-design-uni" aria-label="github" target="_blank" rel="noopener" data-v-c6225e3a data-v-b26fdbba><span class="vpi-social-github"></span></a><a class="VPSocialLink no-icon" href="https://gitee.com/wot-design-uni/wot-design-uni" aria-label="Gitee" target="_blank" rel="noopener" data-v-c6225e3a data-v-b26fdbba><svg t="1692699544299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4184" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#6D6D72" p-id="4185"></path></svg></a><a class="VPSocialLink no-icon" href="/guide/join-group" aria-label="QQ" target="_blank" rel="noopener" data-v-c6225e3a data-v-b26fdbba><svg t="1694688365239" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4048" width="200" height="200"><path d="M980.79827 694.105946c-21.144216-122.796973-109.844757-203.250162-109.844757-203.250162 12.647784-111.477622-33.792-131.26573-33.792-131.26573C827.392 14.668108 530.985514 20.67373 524.730811 20.839784 518.476108 20.67373 222.01427 14.668108 212.300108 359.590054c0 0-46.467459 19.788108-33.819676 131.26573 0 0-88.700541 80.453189-109.817081 203.250162 0 0-11.291676 207.484541 101.403676 25.40627 0 0 25.350919 69.161514 71.790703 131.26573 0 0-83.082378 28.256865-75.997405 101.625081 0 0-2.87827 81.836973 177.401081 76.218811 0 0 126.699243-9.852541 164.753297-63.515676l16.605405 0 0.276757 0 16.633081 0c38.026378 53.635459 164.725622 63.515676 164.725622 63.515676 180.224 5.618162 177.401081-76.218811 177.401081-76.218811 7.029622-73.368216-75.997405-101.625081-75.997405-101.625081 46.439784-62.104216 71.790703-131.26573 71.790703-131.26573C992.034595 901.590486 980.79827 694.105946 980.79827 694.105946z" p-id="4049" fill="#6D6D72"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/26044011388510/posts" aria-label target="_blank" rel="noopener" data-v-c6225e3a data-v-b26fdbba><svg t="1758594913114" class="icon" viewBox="0 0 1316 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5329" width="200" height="200"><path d="M643.181714 247.698286l154.916572-123.172572L643.181714 0.256 643.072 0l-154.660571 124.269714 154.660571 123.245715 0.109714 0.182857z m0 388.461714h0.109715l399.579428-315.245714-108.361143-87.04-291.218285 229.888h-0.146286l-0.109714 0.146285L351.817143 234.093714l-108.251429 87.04 399.433143 315.136 0.146286-0.146285z m-0.146285 215.552l0.146285-0.146286 534.893715-422.034285 108.397714 87.04-243.309714 192L643.145143 1024 10.422857 525.056 0 516.754286l108.251429-86.893715L643.035429 851.748571z" fill="#1E80FF" p-id="5330"></path></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-0850eeb5 data-v-f234b936 data-v-276a3a8f><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-276a3a8f><span class="vpi-more-horizontal icon" data-v-276a3a8f></span></button><div class="menu" data-v-276a3a8f><div class="VPMenu" data-v-276a3a8f data-v-6a9ff74b><!----><!--[--><!--[--><div class="group translations" data-v-f234b936><p class="trans-title" data-v-f234b936>简体中文</p><!--[--><div class="VPMenuLink" data-v-f234b936 data-v-796a4fac><a class="VPLink link" href="/en-US/component/swiper.html" data-v-796a4fac><!--[--><span data-v-796a4fac>English</span><!--]--></a></div><!--]--></div><div class="group" data-v-f234b936><div class="item appearance" data-v-f234b936><p class="label" data-v-f234b936>Appearance</p><div class="appearance-action" data-v-f234b936><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title="Switch to dark theme" aria-checked="false" data-v-f234b936 data-v-c7ba4725 data-v-5c03db5c><span class="check" data-v-5c03db5c><span class="icon" data-v-5c03db5c><!--[--><span class="vpi-sun sun" data-v-c7ba4725></span><span class="vpi-moon moon" data-v-c7ba4725></span><!--]--></span></span></button></div></div></div><div class="group" data-v-f234b936><div class="item social-links" data-v-f234b936><div class="VPSocialLinks social-links-list" data-v-f234b936 data-v-c6225e3a><!--[--><a class="VPSocialLink no-icon" href="https://github.com/Moonofweisheng/wot-design-uni" aria-label="github" target="_blank" rel="noopener" data-v-c6225e3a data-v-b26fdbba><span class="vpi-social-github"></span></a><a class="VPSocialLink no-icon" href="https://gitee.com/wot-design-uni/wot-design-uni" aria-label="Gitee" target="_blank" rel="noopener" data-v-c6225e3a data-v-b26fdbba><svg t="1692699544299" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4184" width="200" height="200"><path d="M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z" fill="#6D6D72" p-id="4185"></path></svg></a><a class="VPSocialLink no-icon" href="/guide/join-group" aria-label="QQ" target="_blank" rel="noopener" data-v-c6225e3a data-v-b26fdbba><svg t="1694688365239" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4048" width="200" height="200"><path d="M980.79827 694.105946c-21.144216-122.796973-109.844757-203.250162-109.844757-203.250162 12.647784-111.477622-33.792-131.26573-33.792-131.26573C827.392 14.668108 530.985514 20.67373 524.730811 20.839784 518.476108 20.67373 222.01427 14.668108 212.300108 359.590054c0 0-46.467459 19.788108-33.819676 131.26573 0 0-88.700541 80.453189-109.817081 203.250162 0 0-11.291676 207.484541 101.403676 25.40627 0 0 25.350919 69.161514 71.790703 131.26573 0 0-83.082378 28.256865-75.997405 101.625081 0 0-2.87827 81.836973 177.401081 76.218811 0 0 126.699243-9.852541 164.753297-63.515676l16.605405 0 0.276757 0 16.633081 0c38.026378 53.635459 164.725622 63.515676 164.725622 63.515676 180.224 5.618162 177.401081-76.218811 177.401081-76.218811 7.029622-73.368216-75.997405-101.625081-75.997405-101.625081 46.439784-62.104216 71.790703-131.26573 71.790703-131.26573C992.034595 901.590486 980.79827 694.105946 980.79827 694.105946z" p-id="4049" fill="#6D6D72"></path></svg></a><a class="VPSocialLink no-icon" href="https://juejin.cn/user/26044011388510/posts" aria-label target="_blank" rel="noopener" data-v-c6225e3a data-v-b26fdbba><svg t="1758594913114" class="icon" viewBox="0 0 1316 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5329" width="200" height="200"><path d="M643.181714 247.698286l154.916572-123.172572L643.181714 0.256 643.072 0l-154.660571 124.269714 154.660571 123.245715 0.109714 0.182857z m0 388.461714h0.109715l399.579428-315.245714-108.361143-87.04-291.218285 229.888h-0.146286l-0.109714 0.146285L351.817143 234.093714l-108.251429 87.04 399.433143 315.136 0.146286-0.146285z m-0.146285 215.552l0.146285-0.146286 534.893715-422.034285 108.397714 87.04-243.309714 192L643.145143 1024 10.422857 525.056 0 516.754286l108.251429-86.893715L643.035429 851.748571z" fill="#1E80FF" p-id="5330"></path></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-0850eeb5 data-v-1f90b587><span class="container" data-v-1f90b587><span class="top" data-v-1f90b587></span><span class="middle" data-v-1f90b587></span><span class="bottom" data-v-1f90b587></span></span></button></div></div></div></div><div class="divider" data-v-0850eeb5><div class="divider-line" data-v-0850eeb5></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-0265fbf3 data-v-18b98bac><div class="container" data-v-18b98bac><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-18b98bac><span class="vpi-align-left menu-icon" data-v-18b98bac></span><span class="menu-text" data-v-18b98bac>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-18b98bac data-v-4d5c8a58><button data-v-4d5c8a58>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-0265fbf3 data-v-87cf4cbd><div class="curtain" data-v-87cf4cbd></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-87cf4cbd><span class="visually-hidden" id="sidebar-aria-label" data-v-87cf4cbd> Sidebar Navigation </span><!--[--><!--]--><!--[--><!----><!--]--><!--[--><div class="no-transition group" data-v-0bf2ac23><section class="VPSidebarItem level-0 collapsible" data-v-0bf2ac23 data-v-af6982fc><div class="item" role="button" tabindex="0" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><h2 class="text" data-v-af6982fc>基础 <!----></h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-af6982fc><span class="vpi-chevron-right caret-icon" data-v-af6982fc></span></div></div><div class="items" data-v-af6982fc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/button.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Button 按钮 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/icon.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Icon 图标 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/layout.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Layout 布局 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/config-provider.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>ConfigProvider 全局配置 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/popup.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Popup 弹出层 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/resize.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Resize 监听元素尺寸变化 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/transition.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Transition 动画 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/fab.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Fab 悬浮按钮 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/text.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Text 文本 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/root-portal.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>RootPortal 根节点 <span class="el-tag el-tag--primary el-tag--small el-tag--plain is-round version-tag" style="" data-v-af6982fc><span class="el-tag__content"><!--[-->1.11.0<!--]--></span><!--v-if--></span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0bf2ac23><section class="VPSidebarItem level-0 collapsible" data-v-0bf2ac23 data-v-af6982fc><div class="item" role="button" tabindex="0" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><h2 class="text" data-v-af6982fc>导航 <!----></h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-af6982fc><span class="vpi-chevron-right caret-icon" data-v-af6982fc></span></div></div><div class="items" data-v-af6982fc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/pagination.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Pagination 分页 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/popover.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Popover 气泡 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/tabs.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Tabs 标签页 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/segmented.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Segmented 分段器 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/tabbar.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Tabbar 标签栏 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/navbar.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Navbar 导航栏 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/sidebar.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Sidebar 侧边栏 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/backtop.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Backtop 回到顶部 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/index-bar.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>IndexBar 索引栏 <!----></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0bf2ac23><section class="VPSidebarItem level-0 collapsible" data-v-0bf2ac23 data-v-af6982fc><div class="item" role="button" tabindex="0" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><h2 class="text" data-v-af6982fc>数据输入 <!----></h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-af6982fc><span class="vpi-chevron-right caret-icon" data-v-af6982fc></span></div></div><div class="items" data-v-af6982fc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/calendar.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Calendar 日历选择器 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/calendar-view.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>CalendarView 日历面板 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/checkbox.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Checkbox 复选框 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/col-picker.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>ColPicker 多列选择器 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/datetime-picker.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>DatetimePicker 时间选择器 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/datetime-picker-view.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>DatetimePickerView 时间选择器视图 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/form.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Form 表单 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/input.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Input 输入框 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/textarea.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Textarea 文本域 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/input-number.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>InputNumber 计数器 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/picker.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Picker 选择器 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/picker-view.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>PickerView 选择器视图 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/radio.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Radio 单选框 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/rate.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Rate 评分 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/search.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Search 搜索框 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/select-picker.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>SelectPicker 单复选选择器 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/slider.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Slider 滑块 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/switch.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Switch 开关 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/upload.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Upload 上传 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/password-input.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>PasswordInput 密码输入框 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/signature.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Signature 签名 <span class="el-tag el-tag--primary el-tag--small el-tag--plain is-round version-tag" style="" data-v-af6982fc><span class="el-tag__content"><!--[-->1.6.0<!--]--></span><!--v-if--></span></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0bf2ac23><section class="VPSidebarItem level-0 collapsible" data-v-0bf2ac23 data-v-af6982fc><div class="item" role="button" tabindex="0" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><h2 class="text" data-v-af6982fc>反馈 <!----></h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-af6982fc><span class="vpi-chevron-right caret-icon" data-v-af6982fc></span></div></div><div class="items" data-v-af6982fc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/action-sheet.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>ActionSheet 动作面板 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/drop-menu.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>DropMenu 下拉菜单 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/floating-panel.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>FloatingPanel 浮动面板 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/loading.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Loading 加载 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/message-box.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>MessageBox 弹框 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/notice-bar.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>NoticeBar 通知栏 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/overlay.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Overlay 遮罩层 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/progress.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Progress 进度条 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/circle.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Circle 环形进度条 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/sort-button.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>SortButton 排序按钮 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/status-tip.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>StatusTip 缺省提示 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/swipe-action.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>SwipeAction 滑动操作 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/toast.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Toast 轻提示 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/notify.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Notify 消息通知 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/tooltip.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Tooltip 文字提示 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/count-down.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>CountDown 倒计时 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/count-to.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>CountTo 数字滚动 <span class="el-tag el-tag--primary el-tag--small el-tag--plain is-round version-tag" style="" data-v-af6982fc><span class="el-tag__content"><!--[-->1.3.8<!--]--></span><!--v-if--></span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/keyboard.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Keyboard 虚拟键盘 <span class="el-tag el-tag--primary el-tag--small el-tag--plain is-round version-tag" style="" data-v-af6982fc><span class="el-tag__content"><!--[-->1.3.10<!--]--></span><!--v-if--></span></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/number-keyboard.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>NumberKeyboard 数字键盘 <!----></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0bf2ac23><section class="VPSidebarItem level-0 collapsible has-active" data-v-0bf2ac23 data-v-af6982fc><div class="item" role="button" tabindex="0" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><h2 class="text" data-v-af6982fc>数据展示 <!----></h2><div class="caret" role="button" aria-label="toggle section" tabindex="0" data-v-af6982fc><span class="vpi-chevron-right caret-icon" data-v-af6982fc></span></div></div><div class="items" data-v-af6982fc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/badge.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Badge 徽标 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/card.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Card 卡片 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/cell.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Cell 单元格 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/collapse.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Collapse 折叠面板 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/curtain.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Curtain 幕帘 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/divider.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Divider 分割线 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/gap.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Gap 间隔槽 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/img.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Img 图片 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/img-cropper.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>ImgCropper 图片裁剪 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/grid.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Grid 宫格 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/loadmore.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Loadmore 加载更多 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/skeleton.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Skeleton 骨架屏 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/steps.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Steps 步骤条 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/sticky.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Sticky 粘性布局 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/tag.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Tag 标签 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/watermark.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Watermark 水印 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/swiper.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Swiper 轮播图 <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/table.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>Table 表格 <!----></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-0bf2ac23><section class="VPSidebarItem level-0" data-v-0bf2ac23 data-v-af6982fc><div class="item" role="button" tabindex="0" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><h2 class="text" data-v-af6982fc>组合式API <!----></h2><!----></div><div class="items" data-v-af6982fc><!--[--><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/use-upload.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>useUpload <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/use-count-down.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>useCountDown <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/use-toast.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>useToast <!----></p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-af6982fc data-v-af6982fc><div class="item" data-v-af6982fc><div class="indicator" data-v-af6982fc></div><a class="VPLink link link" href="/component/use-message.html" data-v-af6982fc><!--[--><p class="text" data-v-af6982fc>useMessage <!----></p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-0265fbf3 data-v-735a7857><div class="VPDoc has-sidebar has-aside is-component is-expanded" data-v-735a7857 data-v-fb66d0fe><!--[--><!--]--><div class="container" data-v-fb66d0fe><div class="aside" data-v-fb66d0fe><div class="aside-curtain" data-v-fb66d0fe></div><div class="aside-container" data-v-fb66d0fe><div class="aside-content" data-v-fb66d0fe><div class="VPDocAside" data-v-fb66d0fe data-v-bd7328b1><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-bd7328b1 data-v-8b66606c><div class="content" data-v-8b66606c><div class="outline-marker" data-v-8b66606c></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-8b66606c>On this page</div><ul class="VPDocOutlineItem root" data-v-8b66606c data-v-36869fd1><!--[--><!--]--></ul></div></nav><!--[--><!--[--><!--[--><!--[--><!--[--><div class="VPDocAsideSponsors"><a class="sponsors-aside-text" href="/reward/sponsor">赞助位</a><div class="VPSponsors vp-sponsor aside"><!----><!----><section class="vp-sponsor-section"><div class="VPSponsorsGrid vp-sponsor-grid xmini" data-vp-grid="1"><div class="vp-sponsor-grid-item"><a class="vp-sponsor-grid-link" href="/reward/sponsor" rel="sponsored noopener"><article class="vp-sponsor-grid-box"><span class="vp-sponsor-grid-text">成为赞助商</span></article></a></div></div></section></div></div><div class="wwads-container"><div class="wwads-cn wwads-vertical" data-id="372"></div></div><!----><!--]--><!--]--><!--]--><!--]--><!--]--><div class="spacer" data-v-bd7328b1></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-fb66d0fe><div class="content-container" data-v-fb66d0fe><!--[--><!--]--><main class="main" data-v-fb66d0fe><div style="position:relative;" class="vp-doc _component_swiper" data-v-fb66d0fe><div><h1 id="swiper-轮播" tabindex="-1">Swiper 轮播 <a class="header-anchor" href="#swiper-轮播" aria-label="Permalink to &quot;Swiper 轮播&quot;">​</a></h1><p>用于创建轮播，它支持水平和垂直方向的滑动，可以自定义样式和指示器位置，支持视频和图片资源的轮播，支持设置轮播标题和自定义标题样式。</p><div class="danger custom-block"><p class="custom-block-title">请注意</p><p>嵌入视频仅在<code>h5</code>、<code>微信小程序</code>和<code>钉钉小程序</code>支持，其余端不支持，请了解后使用。</p></div><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to &quot;基础用法&quot;">​</a></h2><p>通过设置 <code>autoplay</code> 属性控制轮播图是否自动播放，设置 <code>v-model:current</code> 属性初始化轮播图展示的滑块，监听滑块 <code>click</code> 来处理点击事件，而每一页轮播结束后，会触发 <code>change</code> 事件。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;swiperList&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> autoplay</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model:current</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;current&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;handleClick&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @change</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;onChange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> current</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> swiperList</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://wot-ui.cn/assets/redpanda.jpg&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://wot-ui.cn/assets/capybara.jpg&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://wot-ui.cn/assets/panda.jpg&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://wot-ui.cn/assets/moon.jpg&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://wot-ui.cn/assets/meng.jpg&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> handleClick</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">e</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(e)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">function</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> onChange</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">e</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> console.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">log</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(e)</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="点条状指示器" tabindex="-1">点条状指示器 <a class="header-anchor" href="#点条状指示器" aria-label="Permalink to &quot;点条状指示器&quot;">​</a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;swiperList&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> autoplay</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model:current</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;current&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :indicator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{ type: &#39;dots-bar&#39; }&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;handleClick&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @change</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;onChange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="数字指示器" tabindex="-1">数字指示器 <a class="header-anchor" href="#数字指示器" aria-label="Permalink to &quot;数字指示器&quot;">​</a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;swiperList&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> autoplay</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model:current</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;current&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :indicator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{ type: &#39;fraction&#39; }&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> indicatorPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bottom-right&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;handleClick&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @change</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;onChange&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="视频轮播1-3-13" tabindex="-1">视频轮播<span class="el-tag el-tag--primary el-tag--plain" style="vertical-align:middle;margin-left:8px;" text><span class="el-tag__content"><!--[-->1.3.13<!--]--></span><!--v-if--></span> <a class="header-anchor" href="#视频轮播1-3-13" aria-label="Permalink to &quot;视频轮播&lt;el-tag text style=&quot;vertical-align: middle;margin-left:8px;&quot; effect=&quot;plain&quot;&gt;1.3.13&lt;/el-tag&gt;&quot;">​</a></h2><div class="danger custom-block"><p class="custom-block-title">请注意</p><p>嵌入视频仅在<code>h5</code>、<code>微信小程序</code>和<code>钉钉小程序</code>支持，其余端不支持，请了解后使用。</p></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;videoList&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> autoplay</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :indicator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> indicator-position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;bottom-right&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> videoList</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://unpkg.com/wot-design-uni-assets@1.0.3/VID_115503.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://unpkg.com/wot-design-uni-assets@1.0.3/VID_150752.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://unpkg.com/wot-design-uni-assets@1.0.3/VID_155516.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://wot-ui.cn/assets/moon.jpg&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span></code></pre></div><h2 id="手动播放视频" tabindex="-1">手动播放视频 <a class="header-anchor" href="#手动播放视频" aria-label="Permalink to &quot;手动播放视频&quot;">​</a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;videoList&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> autoplay</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :autoplayVideo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :indicator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{ type: &#39;fraction&#39; }&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> indicator-position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;top-right&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> videoList</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://unpkg.com/wot-design-uni-assets/VID_115503.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://unpkg.com/wot-design-uni-assets/VID_150752.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://unpkg.com/wot-design-uni-assets/VID_155516.mp4&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span></code></pre></div><h2 id="播放视频时停止轮播" tabindex="-1">播放视频时停止轮播 <a class="header-anchor" href="#播放视频时停止轮播" aria-label="Permalink to &quot;播放视频时停止轮播&quot;">​</a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;videoList&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> autoplay</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> stopAutoplayWhenVideoPlay</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :autoplayVideo</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :indicator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{ type: &#39;fraction&#39; }&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> indicator-position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;top-right&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> videoList</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://unpkg.com/wot-design-uni-assets/VID_115503.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://unpkg.com/wot-design-uni-assets/VID_150752.mp4&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;https://unpkg.com/wot-design-uni-assets/VID_155516.mp4&#39;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span></code></pre></div><h2 id="手动切换" tabindex="-1">手动切换 <a class="header-anchor" href="#手动切换" aria-label="Permalink to &quot;手动切换&quot;">​</a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;swiperList&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :autoplay</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model:current</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;current&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :indicator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{ showControls: true }&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :loop</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;handleClick&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @change</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;onChange&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="卡片样式" tabindex="-1">卡片样式 <a class="header-anchor" href="#卡片样式" aria-label="Permalink to &quot;卡片样式&quot;">​</a></h2><p>设置 <code>previousMargin</code> 和 <code>nextMargin</code> 实现卡片轮播的样式。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;card-swiper&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> autoplay</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model:current</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;current&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-indicator-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;custom-indicator-class&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-image-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;custom-image&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-next-image-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;custom-image-prev&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-prev-image-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;custom-image-prev&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :indicator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{ type: &#39;dots&#39; }&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;swiperList&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> previousMargin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;24px&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> nextMargin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;24px&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.card-swiper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --wot-swiper-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --wot-swiper-item-padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 24</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rpx;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --wot-swiper-nav-dot-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#e7e7e7</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --wot-swiper-nav-dot-active-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#4d80f0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> padding-bottom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">24</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rpx;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">deep</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">.custom-indicator-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> bottom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-16</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :deep(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.custom-image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rpx;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :deep(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.custom-image-prev</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">168</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !important</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="同时展示-2-个滑块" tabindex="-1">同时展示 2 个滑块 <a class="header-anchor" href="#同时展示-2-个滑块" aria-label="Permalink to &quot;同时展示 2 个滑块&quot;">​</a></h2><p>设置 <code>display-multiple-items</code> 属性，控制同时展示的滑块数量。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;card-swiper&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> autoplay</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model:current</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;current&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :display-multiple-items</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;2&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-indicator-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;custom-indicator-class&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-image-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;custom-image&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-next-image-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;custom-image-prev&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> custom-prev-image-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;custom-image-prev&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :indicator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{ type: &#39;dots&#39; }&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;swiperList&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> previousMargin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;24px&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> nextMargin</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;24px&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.card-swiper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --wot-swiper-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --wot-swiper-item-padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 24</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rpx;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --wot-swiper-nav-dot-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#e7e7e7</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;"> --wot-swiper-nav-dot-active-color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#4d80f0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> padding-bottom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">24</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rpx;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">deep</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">.custom-indicator-class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> bottom</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">-16</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :deep(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.custom-image</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rpx;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> :deep(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.custom-image-prev</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">168</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">px</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> !important</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="垂直方向" tabindex="-1">垂直方向 <a class="header-anchor" href="#垂直方向" aria-label="Permalink to &quot;垂直方向&quot;">​</a></h2><p><code>direction</code> 设置为 <code>vertical</code> 后滑块会纵向排列。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;swiperList&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> direction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;vertical&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> indicatorPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;right&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> autoplay</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model:current</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;current&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :indicator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{ type: &#39;dots-bar&#39; }&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;handleClick&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @change</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;onChange&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="自定义指示器" tabindex="-1">自定义指示器 <a class="header-anchor" href="#自定义指示器" aria-label="Permalink to &quot;自定义指示器&quot;">​</a></h2><p>通过 <code>indicator</code> 插槽可以自定义指示器的样式。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;swiperList&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> direction</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;vertical&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> indicatorPosition</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;right&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> autoplay</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model:current</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;current&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;handleClick&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @change</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;onChange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> #indicator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{ current, total }&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> class</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;custom-indicator&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;position: absolute; bottom: 24rpx; right: 24rpx&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;{{ current + 1 }}/{{ total }}&lt;/</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.custom-indicator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> padding</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 12</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rpx;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">48</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rpx;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> line-height</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">48</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rpx;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> border-radius</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">45</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">%</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> background</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">rgba</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0.6</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">);</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ffffff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> font-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">24</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rpx;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="指定valuekey和textkey" tabindex="-1">指定valueKey和textKey <a class="header-anchor" href="#指定valuekey和textkey" aria-label="Permalink to &quot;指定valueKey和textKey&quot;">​</a></h2><p>通过<code>value-key</code> 属性指定 <code>list</code> 中每个对象图片地址字段，默认为 <code>value</code>。</p><p>通过<code>text-key</code> 属性指定 <code>list</code> 中每个对象标题字段，默认为 <code>text</code>。</p><div class="tip custom-block"><p class="custom-block-title">提示</p><p>当前<code>swiper</code>提供的标题样式为顶部靠右，如需自定义样式，请使用外部样式类<code>customTextClass</code>或者自定义样式<code>customTextStyle</code>，使用<code>text-key</code>时请确认你的组件库版本是否包含此功能。</p></div><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> value-key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;url&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> text-key</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;title&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :custom-text-style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;color:#fff&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;customSwiperList&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> autoplay</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model:current</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;current&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;handleClick&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @change</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;onChange&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> current</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> customSwiperList</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">([</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;https://wot-ui.cn/assets/redpanda.jpg&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;小熊猫！&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;https://wot-ui.cn/assets/capybara.jpg&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;卡！皮！巴！拉！&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;https://wot-ui.cn/assets/panda.jpg&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;大熊猫！&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> },</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { url: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;https://wot-ui.cn/assets/moon.jpg&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">, title: </span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&#39;诗画中国！&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> }</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">])</span></span></code></pre></div><div class="language-scss vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">scss</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">:deep(</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">.customTextClass</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) {</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> position</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">absolute</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> top</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">24</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rpx;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> right</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">24</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rpx;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> color</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#ffffff</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> font-size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">24</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rpx;</span></span>
<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> text-shadow</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 0</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> 8</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">rpx </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">#000000</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="属性控制切换" tabindex="-1">属性控制切换 <a class="header-anchor" href="#属性控制切换" aria-label="Permalink to &quot;属性控制切换&quot;">​</a></h2><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :loop</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;isLoop&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :autoplay</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;false&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;swiperList&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model:current</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;current&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-gap</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell-group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;loop&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-switch</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;isLoop&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> size</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;24px&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> title</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;current&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :value</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;current.toString()&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-cell-group</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;display: flex; justify-content: space-between&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;current--&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;prev&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> type</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;success&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;current++&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;next&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-button</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">view</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><div class="language-javascript vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> current</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">number</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">0</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span>
<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> isLoop</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> ref</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">)</span></span></code></pre></div><h2 id="插槽用法" tabindex="-1">插槽用法 <a class="header-anchor" href="#插槽用法" aria-label="Permalink to &quot;插槽用法&quot;">​</a></h2><p>通过默认插槽可以自定义轮播项的内容。</p><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :list</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;swiperList&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> autoplay</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> v-model:current</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;current&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :indicator</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{ type: &#39;dots-bar&#39; }&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @click</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;handleClick&quot;</span></span>
<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> @change</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;onChange&quot;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> #default</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;{ item }&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;</span><span style="--shiki-light:#B31D28;--shiki-light-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic;">image</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> :src</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;item as string&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> mode</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;aspectFill&quot;</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> style</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">=</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">&quot;width: 100%; height: 100%&quot;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> /&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> &lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">template</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&lt;/</span><span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">wd-swiper</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">&gt;</span></span></code></pre></div><h2 id="attributes" tabindex="-1">Attributes <a class="header-anchor" href="#attributes" aria-label="Permalink to &quot;Attributes&quot;">​</a></h2><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th><th>最低版本</th></tr></thead><tbody><tr><td>autoplay</td><td>是否自动播放</td><td><code>boolean</code></td><td>-</td><td>true</td><td>0.1.22</td></tr><tr><td>v-model:current</td><td>控制当前轮播在哪一项（下标）</td><td><code>number</code></td><td>-</td><td>0</td><td>0.1.22</td></tr><tr><td>direction</td><td>轮播滑动方向</td><td><code>DirectionType</code></td><td><code>horizontal, vertical</code></td><td>horizontal</td><td>0.1.22</td></tr><tr><td>displayMultipleItems</td><td>同时显示的滑块数量</td><td><code>number</code></td><td>-</td><td>1</td><td>0.1.22</td></tr><tr><td>duration</td><td>滑动动画时长</td><td><code>number</code></td><td>-</td><td>300</td><td>0.1.22</td></tr><tr><td>easingFunction</td><td>切换缓动动画类型（微信小程序、快手小程序、京东小程序）</td><td><code>EasingType</code></td><td>-</td><td>default</td><td>0.1.22</td></tr><tr><td>height</td><td>轮播的高度</td><td><code>string / number</code></td><td>-</td><td>192</td><td>0.1.22</td></tr><tr><td>interval</td><td>轮播间隔时间</td><td><code>number</code></td><td>-</td><td>5000</td><td>0.1.22</td></tr><tr><td>list</td><td>图片列表</td><td><code>string[] / SwiperList[]</code></td><td>-</td><td>-</td><td>0.1.22</td></tr><tr><td>loop</td><td>是否循环播放</td><td><code>boolean</code></td><td>-</td><td>true</td><td>0.1.22</td></tr><tr><td>nextMargin</td><td>后边距</td><td><code>string / number</code></td><td>-</td><td>0</td><td>0.1.22</td></tr><tr><td>indicatorPosition</td><td>指示器展示位置</td><td><code>IndicatorPositionType</code></td><td><code>left, top-left, top, top-right, bottom-left, bottom, bottom-right, right</code></td><td>bottom</td><td>0.1.22</td></tr><tr><td>previousMargin</td><td>前边距</td><td><code>string / number</code></td><td>-</td><td>0</td><td>0.1.22</td></tr><tr><td>snapToEdge</td><td>边距是否应用到第一个、最后一个元素</td><td><code>boolean</code></td><td>-</td><td>false</td><td>0.1.22</td></tr><tr><td>indicator</td><td>指示器全部配置</td><td><code>SwiperIndicatorProps / boolean</code></td><td>-</td><td>true</td><td>0.1.22</td></tr><tr><td>imageMode</td><td>图片裁剪、缩放的模式</td><td><code>string</code></td><td>参考官方文档<a href="https://uniapp.dcloud.net.cn/component/image.html#mode-%E6%9C%89%E6%95%88%E5%80%BC" target="_blank" rel="noreferrer">mode</a></td><td><code>aspectFill</code></td><td>0.1.55</td></tr><tr><td>autoplayVideo</td><td>视频是否自动播放，默认自动播放</td><td><code>boolean</code></td><td>-</td><td>true</td><td>1.3.13</td></tr><tr><td>stopPreviousVideo</td><td>切换轮播项时是否停止上一个视频的播放，默认切换时停止播放上一个视频</td><td><code>boolean</code></td><td>-</td><td>true</td><td>1.3.13</td></tr><tr><td>stopAutoplayWhenVideoPlay</td><td>视频播放时是否停止自动轮播</td><td><code>boolean</code></td><td>-</td><td>false</td><td>1.3.13</td></tr><tr><td>customStyle</td><td>外部自定义样式</td><td><code>string</code></td><td>-</td><td>&#39;&#39;</td><td>0.1.22</td></tr><tr><td>value-key</td><td>选项对象中，value 对应的 key</td><td><code>string</code></td><td>-</td><td><code>value</code></td><td>1.3.7</td></tr><tr><td>text-key</td><td>选项对象中，标题 text 对应的 key</td><td><code>string</code></td><td>-</td><td><code>text</code></td><td>1.3.13</td></tr><tr><td>adjust-height</td><td>自动以指定滑块的高度为整个容器的高度。当 vertical 为 true 时，默认不调整，仅支付宝小程序支持。</td><td><code>string</code></td><td><code>&#39;first&#39; / &#39;current&#39; / &#39;highest&#39; / &#39;none&#39;</code></td><td><code>highest</code></td><td>1.3.13</td></tr><tr><td>adjust-vertical-height</td><td>vertical 为 true 时强制使 adjust-height 生效。仅支付宝小程序支持。</td><td><code>boolean</code></td><td>-</td><td><code>false</code></td><td>1.3.13</td></tr><tr><td>｜ muted</td><td>视频是否静音播放</td><td><code>boolean</code></td><td>-</td><td><code>true</code></td><td>1.6.0</td></tr><tr><td>videoLoop</td><td>视频是否循环播放</td><td><code>boolean</code></td><td>-</td><td><code>true</code></td><td>1.6.0</td></tr></tbody></table><h3 id="directiontype" tabindex="-1">DirectionType <a class="header-anchor" href="#directiontype" aria-label="Permalink to &quot;DirectionType&quot;">​</a></h3><p>轮播滑动方向，可选值为 <code>&#39;horizontal&#39;</code> 和 <code>&#39;vertical&#39;</code>。</p><h3 id="easingtype" tabindex="-1">EasingType <a class="header-anchor" href="#easingtype" aria-label="Permalink to &quot;EasingType&quot;">​</a></h3><p>切换缓动动画类型，可选值为 <code>&#39;default&#39;</code>、<code>&#39;linear&#39;</code>、<code>&#39;easeInCubic&#39;</code>、<code>&#39;easeOutCubic&#39;</code> 和 <code>&#39;easeInOutCubic&#39;</code>。</p><h3 id="indicatorpositiontype" tabindex="-1">IndicatorPositionType <a class="header-anchor" href="#indicatorpositiontype" aria-label="Permalink to &quot;IndicatorPositionType&quot;">​</a></h3><p>页码信息展示位置，可选值为 <code>&#39;left&#39;</code>、<code>&#39;top-left&#39;</code>、<code>&#39;top&#39;</code>、<code>&#39;top-right&#39;</code>、<code>&#39;bottom-left&#39;</code>、<code>&#39;bottom&#39;</code>、<code>&#39;bottom-right&#39;</code> 和 <code>&#39;right&#39;</code>。</p><h3 id="swiperlist" tabindex="-1">SwiperList <a class="header-anchor" href="#swiperlist" aria-label="Permalink to &quot;SwiperList&quot;">​</a></h3><p>轮播图项的列表配置，包括 图片或视频地址<code>value</code>、视频封面<code>poster</code> 、文件资源的类型<code>type</code>等属性，支持扩展属性。指定<code>type</code>后组件将不在内部判断文件类型，以<code>type</code>为准。</p><table tabindex="0"><thead><tr><th>name</th><th>说明</th><th>最低版本</th></tr></thead><tbody><tr><td>value</td><td>图片或视频地址</td><td>-</td></tr><tr><td>poster</td><td>视频封面</td><td>-</td></tr><tr><td>type</td><td>用于指定文件资源的类型，可选值<code>image</code>、<code>video</code></td><td>1.4.0</td></tr></tbody></table><h3 id="swiperindicatorprops" tabindex="-1">SwiperIndicatorProps <a class="header-anchor" href="#swiperindicatorprops" aria-label="Permalink to &quot;SwiperIndicatorProps&quot;">​</a></h3><table tabindex="0"><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th><th>最低版本</th></tr></thead><tbody><tr><td>current</td><td>当前轮播在哪一项（下标）</td><td>Number</td><td>-</td><td>0</td><td>0.1.22</td></tr><tr><td>direction</td><td>轮播滑动方向</td><td>DirectionType</td><td><code>horizontal, vertical</code></td><td>horizontal</td><td>0.1.22</td></tr><tr><td>min-show-num</td><td>小于这个数字不会显示导航器</td><td>Number</td><td>-</td><td>2</td><td>0.1.22</td></tr><tr><td>参数</td><td>说明</td><td>类型</td><td>可选值</td><td>默认值</td><td>最低版本</td></tr><tr><td>-------------------</td><td>--------------------------</td><td>---------------------</td><td>--------------------------------------------------------------------------</td><td>----------</td><td>--------</td></tr><tr><td>current</td><td>当前轮播在哪一项（下标）</td><td>Number</td><td>-</td><td>0</td><td>0.1.22</td></tr><tr><td>direction</td><td>轮播滑动方向</td><td>DirectionType</td><td><code>horizontal, vertical</code></td><td>horizontal</td><td>0.1.22</td></tr><tr><td>min-show-num</td><td>小于这个数字不会显示导航器</td><td>Number</td><td>-</td><td>2</td><td>0.1.22</td></tr><tr><td>pagination-position</td><td>页码信息展示位置</td><td>IndicatorPositionType</td><td><code>left, top-left, top, top-right, bottom-left, bottom, bottom-right, right</code></td><td>bottom</td><td>0.1.22</td></tr><tr><td>show-controls</td><td>是否显示控制按钮</td><td>Boolean</td><td>-</td><td>false</td><td>0.1.22</td></tr><tr><td>total</td><td>总共的项数</td><td>Number</td><td>-</td><td>0</td><td>0.1.22</td></tr><tr><td>type</td><td>导航器类型</td><td>SwiperIndicatorType</td><td><code>dots, dots-bar, fraction </code></td><td>dots</td><td>0.1.22</td></tr><tr><td>autoplay</td><td>是否自动播放</td><td>boolean</td><td>-</td><td>true</td><td>0.1.22</td></tr></tbody></table><h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h2><table tabindex="0"><thead><tr><th>事件名称</th><th>说明</th><th>参数</th><th>最低版本</th></tr></thead><tbody><tr><td>click</td><td>点击轮播项时触发</td><td><code>(index: number, item: SwiperList | string)</code></td><td>0.1.22</td></tr><tr><td>change</td><td>轮播切换时触发</td><td><code>(current: number, source: &#39;autoplay&#39; | &#39;touch&#39; | &#39;nav&#39;) </code></td><td>0.1.22</td></tr></tbody></table><h2 id="slot" tabindex="-1">Slot <a class="header-anchor" href="#slot" aria-label="Permalink to &quot;Slot&quot;">​</a></h2><table tabindex="0"><thead><tr><th>name</th><th>说明</th><th>参数</th><th>最低版本</th></tr></thead><tbody><tr><td>indicator</td><td>自定义指示器</td><td><code>{ current: number, total: number }</code></td><td>1.13.0</td></tr><tr><td>default</td><td>item展示内容</td><td>`{ item: string</td><td>SwiperList, index: number }`</td></tr></tbody></table><h2 id="外部样式类" tabindex="-1">外部样式类 <a class="header-anchor" href="#外部样式类" aria-label="Permalink to &quot;外部样式类&quot;">​</a></h2><table tabindex="0"><thead><tr><th>类名</th><th>说明</th><th>最低版本</th></tr></thead><tbody><tr><td>customClass</td><td>外部自定义类名</td><td>0.1.22</td></tr><tr><td>customIndicatorClass</td><td>自定义指示器类名</td><td>0.1.22</td></tr><tr><td>customImageClass</td><td>自定义图片类名，1.3版本将废弃，请使用<code>customItemClass</code>代替</td><td>0.1.22</td></tr><tr><td>customPrevImageClass</td><td>自定义上一个图片类名，1.3版本将废弃，请使用<code>customPrevClass</code>代替</td><td>0.1.22</td></tr><tr><td>customNextImageClass</td><td>自定义下一个图片类名，1.3版本将废弃，请使用<code>customNextClass</code>代替</td><td>0.1.22</td></tr><tr><td>customItemClass</td><td>自定义子项类名</td><td>1.3.13</td></tr><tr><td>customPrevClass</td><td>自定义上一个子项类名</td><td>1.3.13</td></tr><tr><td>customNextClass</td><td>自定义下一个子项类名</td><td>1.3.13</td></tr><tr><td>customTextClass</td><td>自定义文字标题类名</td><td>1.3.13</td></tr><tr><td>customTextStyle</td><td>自定义文字标题样式</td><td>1.3.13</td></tr></tbody></table><h2 id="源代码" tabindex="-1">源代码 <a class="header-anchor" href="#源代码" aria-label="Permalink to &quot;源代码&quot;">​</a></h2><a class="el-link el-link--default" href="https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/subPages/swiper" target="_blank" style="text-decoration:none;font-size:1.2em;"><!--v-if--><span class="el-link__inner"><!--[--><!--[-->文档<!--]--><div style="margin-left:0.25em;">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<g fill="none">
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
<path fill="currentColor" d="M11 6a1 1 0 1 1 0 2H5v11h11v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm9-3a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-8.293 8.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2Z" />
</g>
</svg>
</div><!--]--></span><!--v-if--></a> • <a class="el-link el-link--default" href="https://github.com/Moonofweisheng/wot-design-uni/tree/master/src/uni_modules/wot-design-uni/components/wd-swiper" target="_blank" style="text-decoration:none;font-size:1.2em;"><!--v-if--><span class="el-link__inner"><!--[--><!--[-->组件<!--]--><div style="margin-left:0.25em;">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<g fill="none">
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
<path fill="currentColor" d="M11 6a1 1 0 1 1 0 2H5v11h11v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm9-3a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-8.293 8.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2Z" />
</g>
</svg>
</div><!--]--></span><!--v-if--></a></div></div><!--[--><div class="transition-end demo-model" data-v-aa6da386><div class="demo-header" data-v-aa6da386><a class="el-link el-link--default demo-link" href="subPages/swiper/Index" target="_blank" style="text-decoration:none;font-size:1.2em;" data-v-aa6da386><!--v-if--><span class="el-link__inner"><!--[--><!--[--><!--]--><div style="margin-left:0.25em;">
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
<g fill="none">
<path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z" />
<path fill="currentColor" d="M11 6a1 1 0 1 1 0 2H5v11h11v-6a1 1 0 1 1 2 0v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2zm9-3a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V6.414l-8.293 8.293a1 1 0 0 1-1.414-1.414L17.586 5H15a1 1 0 1 1 0-2Z" />
</g>
</svg>
</div><!--]--></span><!--v-if--></a><div class="demo-qrcode" data-v-aa6da386 data-v-60a63325><!--[--><span class="el-only-child__content el-tooltip__trigger el-tooltip__trigger"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" data-v-60a63325><path fill="currentColor" d="M2 2h9v9H2zm2 2v5h5V4zm9-2h9v9h-9zm2 2v5h5V4zM5.5 5.5h2.004v2.004H5.5zm11 0h2.004v2.004H16.5zm-3.504 7.496H15V15h-2.004zm7 0H22V15h-2.004zM2 13h9v9H2zm2 2v5h5v-5zm11.996.996H18v2h2v2h2V22h-2.004v-2h-2v-2h-2zM5.5 16.5h2.004v2.004H5.5zm7.496 3.496H15V22h-2.004z" data-v-60a63325></path></svg></span><!--teleport start--><!--teleport end--><!--]--></div><i class="el-icon expand-icon" style="cursor:pointer;" data-v-aa6da386><!--[--><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-aa6da386><path fill="currentColor" d="M896 192H128v128h768zm0 256H384v128h512zm0 256H128v128h768zM320 384 128 512l192 128z"></path></svg><!--]--></i></div><div class="iframe-container" data-v-aa6da386><iframe id="demo" class="iframe" scrolling="auto" frameborder="0" src="subPages/swiper/Index" data-v-aa6da386></iframe></div></div><!----><!----><!--]--></main><footer class="VPDocFooter" data-v-fb66d0fe data-v-f286b101><!--[--><!--]--><div class="edit-info" data-v-f286b101><div class="edit-link" data-v-f286b101><a class="VPLink link vp-external-link-icon no-icon edit-link-button" href="https://github.com/Moonofweisheng/wot-design-uni/edit/master/docs/component/swiper.md" target="_blank" rel="noreferrer" data-v-f286b101><!--[--><span class="vpi-square-pen edit-link-icon" data-v-f286b101></span> 为此页提供修改建议<!--]--></a></div><div class="last-updated" data-v-f286b101><p class="VPLastUpdated" data-v-f286b101 data-v-29be4286>最后更新: <time datetime="2025-11-04T09:38:20.000Z" data-v-29be4286></time></p></div></div><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-f286b101><span class="visually-hidden" id="doc-footer-aria-label" data-v-f286b101>Pager</span><div class="pager" data-v-f286b101><a class="VPLink link pager-link prev" href="/component/watermark.html" data-v-f286b101><!--[--><span class="desc" data-v-f286b101>Previous page</span><span class="title" data-v-f286b101>Watermark 水印</span><!--]--></a></div><div class="pager" data-v-f286b101><a class="VPLink link pager-link next" href="/component/table.html" data-v-f286b101><!--[--><span class="desc" data-v-f286b101>Next page</span><span class="title" data-v-f286b101>Table 表格</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><footer class="VPFooter has-sidebar" data-v-0265fbf3 data-v-8c1e2209><div class="container" data-v-8c1e2209><p class="message" data-v-8c1e2209>Released under the MIT License.</p><p class="copyright" data-v-8c1e2209>Copyright © 2023-present weisheng</p></div></footer><!--[--><footer class="VPFooter has-sidebar" data-v-5241aff4><div class="container" data-v-5241aff4><p class="message" data-v-5241aff4>Released under the MIT License.</p><p class="copyright" data-v-5241aff4>Copyright © 2023-present weisheng</p></div></footer><!--]--></div></div>
<script>window.__VP_HASH_MAP__=JSON.parse("{\"component_action-sheet.md\":\"c1wk9iY0\",\"component_backtop.md\":\"ChjnCdXQ\",\"component_badge.md\":\"DHa9DmJP\",\"component_button.md\":\"DdPdDApy\",\"component_calendar-view.md\":\"By77yWTw\",\"component_calendar.md\":\"TPn3bVA7\",\"component_card.md\":\"DKYdUaSz\",\"component_cell.md\":\"B1CvrQYt\",\"component_checkbox.md\":\"BTN9YXJn\",\"component_circle.md\":\"C-NomEQu\",\"component_col-picker.md\":\"B7y2As-_\",\"component_collapse.md\":\"BqEW7fjt\",\"component_config-provider.md\":\"Cc9O2TFG\",\"component_count-down.md\":\"7AKR5r1_\",\"component_count-to.md\":\"DXWdmNx4\",\"component_curtain.md\":\"Bta-imfj\",\"component_datetime-picker-view.md\":\"rJ_XDCZt\",\"component_datetime-picker.md\":\"z0yCsYtN\",\"component_divider.md\":\"R4TdmO8i\",\"component_drop-menu.md\":\"C13tbRUp\",\"component_fab.md\":\"DImkhvpn\",\"component_floating-panel.md\":\"B7i2tAhS\",\"component_form.md\":\"CME-wnrf\",\"component_gap.md\":\"DIIJY1vb\",\"component_grid.md\":\"DkQoGrey\",\"component_icon.md\":\"BuHdjlZN\",\"component_img-cropper.md\":\"BqLT0gMm\",\"component_img.md\":\"D7sPPqXk\",\"component_index-bar.md\":\"BOkNzK1d\",\"component_input-number.md\":\"De7gihWB\",\"component_input.md\":\"DfDNMeI7\",\"component_keyboard.md\":\"BOsb0wk-\",\"component_layout.md\":\"DfTs5fy6\",\"component_loading.md\":\"IsQE3LX_\",\"component_loadmore.md\":\"CojhRRRt\",\"component_message-box.md\":\"C-1IPENS\",\"component_navbar.md\":\"CJu6jrqt\",\"component_notice-bar.md\":\"M5Td2nA8\",\"component_notify.md\":\"Bey59xX8\",\"component_number-keyboard.md\":\"CHSyxjdT\",\"component_overlay.md\":\"Cg9-6ocD\",\"component_pagination.md\":\"CDHiQxUl\",\"component_password-input.md\":\"072mSgvk\",\"component_picker-view.md\":\"Bai5gXeH\",\"component_picker.md\":\"DS6cN2sU\",\"component_popover.md\":\"A4pXDyWr\",\"component_popup.md\":\"BcRFloja\",\"component_progress.md\":\"Czp_wd4C\",\"component_radio.md\":\"DbJTnGS0\",\"component_rate.md\":\"C_WkdfIZ\",\"component_resize.md\":\"D8RZtXoR\",\"component_root-portal.md\":\"roOdXyJH\",\"component_search.md\":\"Mb8x7t2A\",\"component_segmented.md\":\"yzL4eQEM\",\"component_select-picker.md\":\"Bfsrlx9I\",\"component_sidebar.md\":\"DL1UgvVn\",\"component_signature.md\":\"DkbbyalD\",\"component_skeleton.md\":\"Cc_j76M_\",\"component_slider.md\":\"p6HGcIPe\",\"component_sort-button.md\":\"BD8z8Cve\",\"component_status-tip.md\":\"BvIC-tWU\",\"component_steps.md\":\"CGl3Ci6T\",\"component_sticky.md\":\"C_lGa15p\",\"component_swipe-action.md\":\"Be8RihFK\",\"component_swiper.md\":\"DaYLlpEs\",\"component_switch.md\":\"C0mqvZuH\",\"component_tabbar.md\":\"ydn44Av0\",\"component_table.md\":\"BkUxx66J\",\"component_tabs.md\":\"ZBLgX7sE\",\"component_tag.md\":\"Cah0fbm3\",\"component_text.md\":\"T9lTnVI5\",\"component_textarea.md\":\"CcwDxrKj\",\"component_toast.md\":\"BZuJA7Lz\",\"component_tooltip.md\":\"CC2aFIqN\",\"component_transition.md\":\"CkEHkk23\",\"component_upload.md\":\"XiFkl4kM\",\"component_use-count-down.md\":\"Xnxyrag0\",\"component_use-message.md\":\"BuGPPdHM\",\"component_use-notify.md\":\"BWojxxLU\",\"component_use-toast.md\":\"BZkuWk55\",\"component_use-upload.md\":\"Y-ZiqRcB\",\"component_watermark.md\":\"Cd26NJVG\",\"en-us_component_action-sheet.md\":\"Cd3U93mr\",\"en-us_component_backtop.md\":\"Bslz86Iq\",\"en-us_component_badge.md\":\"D8LazXDE\",\"en-us_component_button.md\":\"CnMVwqBn\",\"en-us_component_calendar-view.md\":\"iz4-bCKT\",\"en-us_component_calendar.md\":\"v2nB85ff\",\"en-us_component_card.md\":\"uC1up0ZK\",\"en-us_component_cell.md\":\"hIXxrdwM\",\"en-us_component_checkbox.md\":\"qBl_DsKh\",\"en-us_component_circle.md\":\"BPmZrds3\",\"en-us_component_col-picker.md\":\"BWRXToYb\",\"en-us_component_collapse.md\":\"LKD9aBUw\",\"en-us_component_config-provider.md\":\"CFNW3U-S\",\"en-us_component_count-down.md\":\"BJQiz0fk\",\"en-us_component_count-to.md\":\"D2-tcAxo\",\"en-us_component_curtain.md\":\"CpVzT501\",\"en-us_component_datetime-picker-view.md\":\"DRRyefaI\",\"en-us_component_datetime-picker.md\":\"viOfH4-D\",\"en-us_component_divider.md\":\"5yS4Zj7t\",\"en-us_component_drop-menu.md\":\"CjkACyIn\",\"en-us_component_fab.md\":\"BKrDynOW\",\"en-us_component_floating-panel.md\":\"BNdM3TAS\",\"en-us_component_form.md\":\"CmWlrhX2\",\"en-us_component_gap.md\":\"xHLZJiab\",\"en-us_component_grid.md\":\"BnbHrzpx\",\"en-us_component_icon.md\":\"ZGGzXqB0\",\"en-us_component_img-cropper.md\":\"NY3w0k-N\",\"en-us_component_img.md\":\"DJVBjNYz\",\"en-us_component_index-bar.md\":\"fF1C0kOD\",\"en-us_component_input-number.md\":\"CAZT25bO\",\"en-us_component_input.md\":\"DW5h1itn\",\"en-us_component_keyboard.md\":\"CodeGHFL\",\"en-us_component_layout.md\":\"rRHhIkkw\",\"en-us_component_loading.md\":\"B35WuME0\",\"en-us_component_loadmore.md\":\"D9kTaZhc\",\"en-us_component_message-box.md\":\"DrnZVwZp\",\"en-us_component_navbar.md\":\"BmlPgjvC\",\"en-us_component_notice-bar.md\":\"Cvr7wOv6\",\"en-us_component_notify.md\":\"Br3ccipV\",\"en-us_component_number-keyboard.md\":\"CaPQvUPH\",\"en-us_component_overlay.md\":\"zNxFtOQZ\",\"en-us_component_pagination.md\":\"DHm_Z8LN\",\"en-us_component_password-input.md\":\"C29XspiG\",\"en-us_component_picker-view.md\":\"a3X9EZkl\",\"en-us_component_picker.md\":\"CCw2hvXb\",\"en-us_component_popover.md\":\"BPLhDTIf\",\"en-us_component_popup.md\":\"BLOzydaK\",\"en-us_component_progress.md\":\"2cPjArIs\",\"en-us_component_radio.md\":\"BynGPD10\",\"en-us_component_rate.md\":\"D2Aaq0NP\",\"en-us_component_resize.md\":\"C3NcH4RM\",\"en-us_component_root-portal.md\":\"CTbe11FN\",\"en-us_component_search.md\":\"D8gdRsFB\",\"en-us_component_segmented.md\":\"DNjB96qJ\",\"en-us_component_select-picker.md\":\"7vfJz5YJ\",\"en-us_component_sidebar.md\":\"BgxPFXds\",\"en-us_component_signature.md\":\"D2eNXB2w\",\"en-us_component_skeleton.md\":\"Dgx_lV7y\",\"en-us_component_slider.md\":\"KcUCvn5T\",\"en-us_component_sort-button.md\":\"DHr8Lg6-\",\"en-us_component_status-tip.md\":\"PEI5mWsU\",\"en-us_component_steps.md\":\"C5tvS80n\",\"en-us_component_sticky.md\":\"DW-Nlnxa\",\"en-us_component_swipe-action.md\":\"DlVLtPzt\",\"en-us_component_swiper.md\":\"DS-UOAtN\",\"en-us_component_switch.md\":\"CoRdlYBi\",\"en-us_component_tabbar.md\":\"DrKNkzwJ\",\"en-us_component_table.md\":\"BUyeA4sa\",\"en-us_component_tabs.md\":\"DmdKyG-a\",\"en-us_component_tag.md\":\"BEcm8wa-\",\"en-us_component_text.md\":\"CZdJbtwW\",\"en-us_component_textarea.md\":\"56-Whl10\",\"en-us_component_toast.md\":\"BRSBm3RU\",\"en-us_component_tooltip.md\":\"C8DQf8H2\",\"en-us_component_transition.md\":\"C6DPrCEx\",\"en-us_component_upload.md\":\"BlVSsmpW\",\"en-us_component_use-count-down.md\":\"CyEqu1km\",\"en-us_component_use-message.md\":\"CMAz6nqd\",\"en-us_component_use-notify.md\":\"D0AjOFl5\",\"en-us_component_use-toast.md\":\"BV3WSzoK\",\"en-us_component_use-upload.md\":\"CBfVolaU\",\"en-us_component_watermark.md\":\"Do6ZpG1-\",\"en-us_guide_cases.md\":\"4dW2tPiK\",\"en-us_guide_changelog.md\":\"D1rlzokv\",\"en-us_guide_cli-templates.md\":\"4m4MEJdq\",\"en-us_guide_common-problems.md\":\"m7Th9aXD\",\"en-us_guide_custom-theme.md\":\"BPELFWuA\",\"en-us_guide_introduction.md\":\"C1I0pOjl\",\"en-us_guide_join-group.md\":\"DWJTm-4f\",\"en-us_guide_locale.md\":\"X5sYa5Eb\",\"en-us_guide_quick-use.md\":\"kNUqoGim\",\"en-us_guide_typography.md\":\"du5OecQa\",\"en-us_index.md\":\"BiPmfrlN\",\"en-us_reward_donor.md\":\"CFQu67rx\",\"en-us_reward_reward.md\":\"DtUfFX7-\",\"guide_cases.md\":\"CVhR7WpZ\",\"guide_changelog.md\":\"Cuc-ZOrl\",\"guide_cli-templates.md\":\"CjvCMsRJ\",\"guide_common-problems.md\":\"DbBMHfw2\",\"guide_consultation.md\":\"BLRMRi4o\",\"guide_custom-theme.md\":\"1nmxOJQd\",\"guide_introduction.md\":\"DvJU-z7D\",\"guide_join-group.md\":\"CGl14Eqc\",\"guide_locale.md\":\"CgE__xv0\",\"guide_quick-use.md\":\"BZt0nmeU\",\"guide_typography.md\":\"IvRl_D1k\",\"index.md\":\"DU4EjyMg\",\"reward_donor.md\":\"DeOBN5Sq\",\"reward_reward.md\":\"CfPFqJkK\",\"reward_sponsor.md\":\"C0P6i09I\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Wot UI\",\"description\":\"一个参照wot-design打造的uni-app组件库\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"logo\":\"/logo.png\",\"lastUpdated\":{\"text\":\"最后更新\"},\"editLink\":{\"pattern\":\"https://github.com/Moonofweisheng/wot-design-uni/edit/master/docs/:path\",\"text\":\"为此页提供修改建议\"},\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/Moonofweisheng/wot-design-uni\"},{\"icon\":{\"svg\":\"<svg t=\\\"1692699544299\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"4184\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M512 1024C230.4 1024 0 793.6 0 512S230.4 0 512 0s512 230.4 512 512-230.4 512-512 512z m259.2-569.6H480c-12.8 0-25.6 12.8-25.6 25.6v64c0 12.8 12.8 25.6 25.6 25.6h176c12.8 0 25.6 12.8 25.6 25.6v12.8c0 41.6-35.2 76.8-76.8 76.8h-240c-12.8 0-25.6-12.8-25.6-25.6V416c0-41.6 35.2-76.8 76.8-76.8h355.2c12.8 0 25.6-12.8 25.6-25.6v-64c0-12.8-12.8-25.6-25.6-25.6H416c-105.6 0-188.8 86.4-188.8 188.8V768c0 12.8 12.8 25.6 25.6 25.6h374.4c92.8 0 169.6-76.8 169.6-169.6v-144c0-12.8-12.8-25.6-25.6-25.6z\\\" fill=\\\"#6D6D72\\\" p-id=\\\"4185\\\"></path></svg>\"},\"link\":\"https://gitee.com/wot-design-uni/wot-design-uni\",\"ariaLabel\":\"Gitee\"},{\"icon\":{\"svg\":\"<svg t=\\\"1694688365239\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1024 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"4048\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M980.79827 694.105946c-21.144216-122.796973-109.844757-203.250162-109.844757-203.250162 12.647784-111.477622-33.792-131.26573-33.792-131.26573C827.392 14.668108 530.985514 20.67373 524.730811 20.839784 518.476108 20.67373 222.01427 14.668108 212.300108 359.590054c0 0-46.467459 19.788108-33.819676 131.26573 0 0-88.700541 80.453189-109.817081 203.250162 0 0-11.291676 207.484541 101.403676 25.40627 0 0 25.350919 69.161514 71.790703 131.26573 0 0-83.082378 28.256865-75.997405 101.625081 0 0-2.87827 81.836973 177.401081 76.218811 0 0 126.699243-9.852541 164.753297-63.515676l16.605405 0 0.276757 0 16.633081 0c38.026378 53.635459 164.725622 63.515676 164.725622 63.515676 180.224 5.618162 177.401081-76.218811 177.401081-76.218811 7.029622-73.368216-75.997405-101.625081-75.997405-101.625081 46.439784-62.104216 71.790703-131.26573 71.790703-131.26573C992.034595 901.590486 980.79827 694.105946 980.79827 694.105946z\\\" p-id=\\\"4049\\\" fill=\\\"#6D6D72\\\"></path></svg>\"},\"link\":\"/guide/join-group\",\"ariaLabel\":\"QQ\"},{\"icon\":{\"svg\":\"<svg t=\\\"1758594913114\\\" class=\\\"icon\\\" viewBox=\\\"0 0 1316 1024\\\" version=\\\"1.1\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\" p-id=\\\"5329\\\" width=\\\"200\\\" height=\\\"200\\\"><path d=\\\"M643.181714 247.698286l154.916572-123.172572L643.181714 0.256 643.072 0l-154.660571 124.269714 154.660571 123.245715 0.109714 0.182857z m0 388.461714h0.109715l399.579428-315.245714-108.361143-87.04-291.218285 229.888h-0.146286l-0.109714 0.146285L351.817143 234.093714l-108.251429 87.04 399.433143 315.136 0.146286-0.146285z m-0.146285 215.552l0.146285-0.146286 534.893715-422.034285 108.397714 87.04-243.309714 192L643.145143 1024 10.422857 525.056 0 516.754286l108.251429-86.893715L643.035429 851.748571z\\\" fill=\\\"#1E80FF\\\" p-id=\\\"5330\\\"></path></svg>\"},\"link\":\"https://juejin.cn/user/26044011388510/posts\"}],\"search\":{\"provider\":\"algolia\",\"options\":{\"appId\":\"A74X2RFXSU\",\"apiKey\":\"6961856d63f5181bf71cb4fa3e4398d2\",\"indexName\":\"wot-design-uni2\"}},\"footer\":{\"message\":\"Released under the MIT License.\",\"copyright\":\"Copyright © 2023-present weisheng\"}},\"locales\":{\"root\":{\"label\":\"简体中文\",\"lang\":\"zh-CN\",\"description\":\"一个参照wot-design打造的uni-app组件库\",\"themeConfig\":{\"lastUpdated\":{\"text\":\"最后更新\"},\"editLink\":{\"pattern\":\"https://github.com/Moonofweisheng/wot-design-uni/edit/master/docs/:path\",\"text\":\"为此页提供修改建议\"},\"nav\":[{\"text\":\"指南\",\"activeMatch\":\"/guide/\",\"items\":[{\"text\":\"介绍\",\"link\":\"/guide/introduction\"},{\"text\":\"快速上手\",\"link\":\"/guide/quick-use\"},{\"text\":\"脚手架与模板\",\"link\":\"/guide/cli-templates\"},{\"text\":\"咨询服务\",\"link\":\"/guide/consultation\"},{\"text\":\"定制主题\",\"link\":\"/guide/custom-theme\"},{\"text\":\"常见问题\",\"link\":\"/guide/common-problems\"},{\"text\":\"国际化\",\"link\":\"/guide/locale\"},{\"text\":\"更新日志\",\"link\":\"/guide/changelog\"},{\"text\":\"⭐ 案例\",\"link\":\"/guide/cases\"},{\"text\":\"加群沟通\",\"link\":\"/guide/join-group\"}]},{\"text\":\"组件\",\"activeMatch\":\"/component/\",\"items\":[{\"text\":\"基础组件\",\"link\":\"/component/button\"},{\"text\":\"导航组件\",\"link\":\"/component/pagination\"},{\"text\":\"数据输入\",\"link\":\"/component/calendar\"},{\"text\":\"反馈组件\",\"link\":\"/component/action-sheet\"},{\"text\":\"数据展示\",\"link\":\"/component/badge\"}]},{\"text\":\"🥤一杯咖啡\",\"link\":\"/reward/reward\",\"activeMatch\":\"/reward/\"},{\"text\":\"博客\",\"link\":\"https://blog.wot-ui.cn/\"},{\"text\":\"模板\",\"items\":[{\"text\":\"快速上手模板 wot-starter\",\"link\":\"https://starter.wot-ui.cn/\"},{\"text\":\"vitesse-uni-app\",\"link\":\"https://vitesse-docs.netlify.app/\"},{\"text\":\"wot-starter-retail\",\"link\":\"https://github.com/wot-ui/wot-starter-retail\"},{\"text\":\"unibest\",\"link\":\"https://unibest.tech/\"}]},{\"text\":\"资源\",\"items\":[{\"text\":\"快速上手模板\",\"link\":\"https://starter.wot-ui.cn/\"},{\"text\":\"VS Code 代码提示插件\",\"link\":\"https://marketplace.visualstudio.com/items?itemName=wot-ui.wot-ui-intellisense\"},{\"text\":\"Vue3 uni-app路由库\",\"link\":\"https://moonofweisheng.github.io/uni-mini-router/\"},{\"text\":\"多平台小程序CI工具\",\"link\":\"https://github.com/Moonofweisheng/uni-mini-ci\"},{\"text\":\"Uni Helper\",\"link\":\"https://uni-helper.js.org/\"},{\"text\":\"uni-ku\",\"link\":\"https://github.com/uni-ku\"}]}],\"sidebar\":{\"/guide/\":[{\"text\":\"介绍\",\"link\":\"/guide/introduction\"},{\"text\":\"快速上手\",\"link\":\"/guide/quick-use\"},{\"text\":\"脚手架与模板\",\"link\":\"/guide/cli-templates\"},{\"text\":\"咨询服务\",\"link\":\"/guide/consultation\"},{\"text\":\"定制主题\",\"link\":\"/guide/custom-theme\"},{\"text\":\"国际化\",\"link\":\"/guide/locale\"},{\"text\":\"常见问题\",\"link\":\"/guide/common-problems\"},{\"text\":\"更新日志\",\"link\":\"/guide/changelog\"},{\"text\":\"⭐ 案例\",\"link\":\"/guide/cases\"},{\"text\":\"加群沟通\",\"link\":\"/guide/join-group\"}],\"/reward/\":[{\"text\":\"🥤一杯咖啡\",\"link\":\"/reward/reward\"},{\"text\":\"榜上有名\",\"link\":\"/reward/donor\"},{\"text\":\"成为赞助者\",\"link\":\"/reward/sponsor\"}],\"/component/\":[{\"text\":\"基础\",\"collapsed\":false,\"items\":[{\"link\":\"/component/button\",\"text\":\"Button 按钮\"},{\"link\":\"/component/icon\",\"text\":\"Icon 图标\"},{\"link\":\"/component/layout\",\"text\":\"Layout 布局\"},{\"link\":\"/component/config-provider\",\"text\":\"ConfigProvider 全局配置\"},{\"link\":\"/component/popup\",\"text\":\"Popup 弹出层\"},{\"link\":\"/component/resize\",\"text\":\"Resize 监听元素尺寸变化\"},{\"link\":\"/component/transition\",\"text\":\"Transition 动画\"},{\"link\":\"/component/fab\",\"text\":\"Fab 悬浮按钮\"},{\"link\":\"/component/text\",\"text\":\"Text 文本\"},{\"link\":\"/component/root-portal\",\"text\":\"RootPortal 根节点\"}]},{\"text\":\"导航\",\"collapsed\":false,\"items\":[{\"link\":\"/component/pagination\",\"text\":\"Pagination 分页\"},{\"link\":\"/component/popover\",\"text\":\"Popover 气泡\"},{\"link\":\"/component/tabs\",\"text\":\"Tabs 标签页\"},{\"link\":\"/component/segmented\",\"text\":\"Segmented 分段器\"},{\"link\":\"/component/tabbar\",\"text\":\"Tabbar 标签栏\"},{\"link\":\"/component/navbar\",\"text\":\"Navbar 导航栏\"},{\"link\":\"/component/sidebar\",\"text\":\"Sidebar 侧边栏\"},{\"link\":\"/component/backtop\",\"text\":\"Backtop 回到顶部\"},{\"link\":\"/component/index-bar\",\"text\":\"IndexBar 索引栏\"}]},{\"text\":\"数据输入\",\"collapsed\":false,\"items\":[{\"link\":\"/component/calendar\",\"text\":\"Calendar 日历选择器\"},{\"link\":\"/component/calendar-view\",\"text\":\"CalendarView 日历面板\"},{\"link\":\"/component/checkbox\",\"text\":\"Checkbox 复选框\"},{\"link\":\"/component/col-picker\",\"text\":\"ColPicker 多列选择器\"},{\"link\":\"/component/datetime-picker\",\"text\":\"DatetimePicker 时间选择器\"},{\"link\":\"/component/datetime-picker-view\",\"text\":\"DatetimePickerView 时间选择器视图\"},{\"link\":\"/component/form\",\"text\":\"Form 表单\"},{\"link\":\"/component/input\",\"text\":\"Input 输入框\"},{\"link\":\"/component/textarea\",\"text\":\"Textarea 文本域\"},{\"link\":\"/component/input-number\",\"text\":\"InputNumber 计数器\"},{\"link\":\"/component/picker\",\"text\":\"Picker 选择器\"},{\"link\":\"/component/picker-view\",\"text\":\"PickerView 选择器视图\"},{\"link\":\"/component/radio\",\"text\":\"Radio 单选框\"},{\"link\":\"/component/rate\",\"text\":\"Rate 评分\"},{\"link\":\"/component/search\",\"text\":\"Search 搜索框\"},{\"link\":\"/component/select-picker\",\"text\":\"SelectPicker 单复选选择器\"},{\"link\":\"/component/slider\",\"text\":\"Slider 滑块\"},{\"link\":\"/component/switch\",\"text\":\"Switch 开关\"},{\"link\":\"/component/upload\",\"text\":\"Upload 上传\"},{\"link\":\"/component/password-input\",\"text\":\"PasswordInput 密码输入框\"},{\"link\":\"/component/signature\",\"text\":\"Signature 签名\"}]},{\"text\":\"反馈\",\"collapsed\":false,\"items\":[{\"link\":\"/component/action-sheet\",\"text\":\"ActionSheet 动作面板\"},{\"link\":\"/component/drop-menu\",\"text\":\"DropMenu 下拉菜单\"},{\"link\":\"/component/floating-panel\",\"text\":\"FloatingPanel 浮动面板\"},{\"link\":\"/component/loading\",\"text\":\"Loading 加载\"},{\"link\":\"/component/message-box\",\"text\":\"MessageBox 弹框\"},{\"link\":\"/component/notice-bar\",\"text\":\"NoticeBar 通知栏\"},{\"link\":\"/component/overlay\",\"text\":\"Overlay 遮罩层\"},{\"link\":\"/component/progress\",\"text\":\"Progress 进度条\"},{\"link\":\"/component/circle\",\"text\":\"Circle 环形进度条\"},{\"link\":\"/component/sort-button\",\"text\":\"SortButton 排序按钮\"},{\"link\":\"/component/status-tip\",\"text\":\"StatusTip 缺省提示\"},{\"link\":\"/component/swipe-action\",\"text\":\"SwipeAction 滑动操作\"},{\"link\":\"/component/toast\",\"text\":\"Toast 轻提示\"},{\"link\":\"/component/notify\",\"text\":\"Notify 消息通知\"},{\"link\":\"/component/tooltip\",\"text\":\"Tooltip 文字提示\"},{\"link\":\"/component/count-down\",\"text\":\"CountDown 倒计时\"},{\"link\":\"/component/count-to\",\"text\":\"CountTo 数字滚动\"},{\"link\":\"/component/keyboard\",\"text\":\"Keyboard 虚拟键盘\"},{\"link\":\"/component/number-keyboard\",\"text\":\"NumberKeyboard 数字键盘\"}]},{\"text\":\"数据展示\",\"collapsed\":false,\"items\":[{\"link\":\"/component/badge\",\"text\":\"Badge 徽标\"},{\"link\":\"/component/card\",\"text\":\"Card 卡片\"},{\"link\":\"/component/cell\",\"text\":\"Cell 单元格\"},{\"link\":\"/component/collapse\",\"text\":\"Collapse 折叠面板\"},{\"link\":\"/component/curtain\",\"text\":\"Curtain 幕帘\"},{\"link\":\"/component/divider\",\"text\":\"Divider 分割线\"},{\"link\":\"/component/gap\",\"text\":\"Gap 间隔槽\"},{\"link\":\"/component/img\",\"text\":\"Img 图片\"},{\"link\":\"/component/img-cropper\",\"text\":\"ImgCropper 图片裁剪\"},{\"link\":\"/component/grid\",\"text\":\"Grid 宫格\"},{\"link\":\"/component/loadmore\",\"text\":\"Loadmore 加载更多\"},{\"link\":\"/component/skeleton\",\"text\":\"Skeleton 骨架屏\"},{\"link\":\"/component/steps\",\"text\":\"Steps 步骤条\"},{\"link\":\"/component/sticky\",\"text\":\"Sticky 粘性布局\"},{\"link\":\"/component/tag\",\"text\":\"Tag 标签\"},{\"link\":\"/component/watermark\",\"text\":\"Watermark 水印\"},{\"link\":\"/component/swiper\",\"text\":\"Swiper 轮播图\"},{\"link\":\"/component/table\",\"text\":\"Table 表格\"}]},{\"text\":\"组合式API\",\"items\":[{\"text\":\"useUpload\",\"link\":\"/component/use-upload\"},{\"text\":\"useCountDown\",\"link\":\"/component/use-count-down\"},{\"text\":\"useToast\",\"link\":\"/component/use-toast\"},{\"text\":\"useMessage\",\"link\":\"/component/use-message\"}]}]}}},\"en-US\":{\"label\":\"English\",\"lang\":\"en-US\",\"description\":\"A uni-app component library based on wot-design\",\"themeConfig\":{\"lastUpdated\":{\"text\":\"Last Updated\"},\"editLink\":{\"pattern\":\"https://github.com/Moonofweisheng/wot-design-uni/edit/master/docs/:path\",\"text\":\"Edit this page on GitHub\"},\"nav\":[{\"text\":\"Guide\",\"activeMatch\":\"/guide/\",\"items\":[{\"text\":\"Introduction\",\"link\":\"/en-US/guide/introduction\"},{\"text\":\"Quick Start\",\"link\":\"/en-US/guide/quick-use\"},{\"text\":\"CLI & Templates\",\"link\":\"/en-US/guide/cli-templates\"},{\"text\":\"Custom Theme\",\"link\":\"/en-US/guide/custom-theme\"},{\"text\":\"Common Problems\",\"link\":\"/en-US/guide/common-problems\"},{\"text\":\"Internationalization\",\"link\":\"/en-US/guide/locale\"},{\"text\":\"Changelog\",\"link\":\"/en-US/guide/changelog\"},{\"text\":\"⭐ Cases\",\"link\":\"/en-US/guide/cases\"},{\"text\":\"Join Group\",\"link\":\"/en-US/guide/join-group\"}]},{\"text\":\"Components\",\"activeMatch\":\"/component/\",\"items\":[{\"text\":\"Basic Components\",\"link\":\"/en-US/component/button\"},{\"text\":\"Navigation\",\"link\":\"/en-US/component/pagination\"},{\"text\":\"Data Input\",\"link\":\"/en-US/component/calendar\"},{\"text\":\"Feedback\",\"link\":\"/en-US/component/action-sheet\"},{\"text\":\"Data Display\",\"link\":\"/en-US/component/badge\"}]},{\"text\":\"🥤Buy Me a Coffee\",\"link\":\"/en-US/reward/reward\",\"activeMatch\":\"/reward/\"},{\"text\":\"Blog\",\"link\":\"https://blog.wot-ui.cn/\"},{\"text\":\"Templates\",\"items\":[{\"text\":\"Quick Start Template wot-starter\",\"link\":\"https://starter.wot-ui.cn/\"},{\"text\":\"vitesse-uni-app\",\"link\":\"https://vitesse-docs.netlify.app/\"},{\"text\":\"wot-starter-retail\",\"link\":\"https://github.com/wot-ui/wot-starter-retail\"},{\"text\":\"unibest\",\"link\":\"https://unibest.tech/\"}]},{\"text\":\"Resources\",\"items\":[{\"text\":\"Quick Start Template\",\"link\":\"https://starter.wot-ui.cn/\"},{\"text\":\"VS Code IntelliSense Plugin\",\"link\":\"https://marketplace.visualstudio.com/items?itemName=wot-ui.wot-ui-intellisense\"},{\"text\":\"Vue3 uni-app Router\",\"link\":\"https://moonofweisheng.github.io/uni-mini-router/\"},{\"text\":\"Mini Program CI Tool\",\"link\":\"https://github.com/Moonofweisheng/uni-mini-ci\"},{\"text\":\"Uni Helper\",\"link\":\"https://uni-helper.js.org/\"},{\"text\":\"uni-ku\",\"link\":\"https://github.com/uni-ku\"}]}],\"sidebar\":{\"/en-US/guide/\":[{\"text\":\"Introduction\",\"link\":\"/en-US/guide/introduction\"},{\"text\":\"Quick Start\",\"link\":\"/en-US/guide/quick-use\"},{\"text\":\"CLI & Templates\",\"link\":\"/en-US/guide/cli-templates\"},{\"text\":\"Custom Theme\",\"link\":\"/en-US/guide/custom-theme\"},{\"text\":\"Internationalization\",\"link\":\"/en-US/guide/locale\"},{\"text\":\"Common Problems\",\"link\":\"/en-US/guide/common-problems\"},{\"text\":\"Changelog\",\"link\":\"/en-US/guide/changelog\"},{\"text\":\"⭐ Cases\",\"link\":\"/en-US/guide/cases\"},{\"text\":\"Join Group\",\"link\":\"/en-US/guide/join-group\"}],\"/en-US/reward/\":[{\"text\":\"🥤Buy Me a Coffee\",\"link\":\"/en-US/reward/reward\"},{\"text\":\"Donor List\",\"link\":\"/en-US/reward/donor\"},{\"text\":\"Sponsor\",\"link\":\"/reward/sponsor\"}],\"/en-US/component/\":[{\"text\":\"Basic\",\"collapsed\":false,\"items\":[{\"link\":\"/en-US/component/button\",\"text\":\"Button\"},{\"link\":\"/en-US/component/icon\",\"text\":\"Icon\"},{\"link\":\"/en-US/component/layout\",\"text\":\"Layout\"},{\"link\":\"/en-US/component/config-provider\",\"text\":\"ConfigProvider\"},{\"link\":\"/en-US/component/popup\",\"text\":\"Popup\"},{\"link\":\"/en-US/component/resize\",\"text\":\"Resize\"},{\"link\":\"/en-US/component/transition\",\"text\":\"Transition\"},{\"link\":\"/en-US/component/fab\",\"text\":\"Fab\"},{\"link\":\"/en-US/component/text\",\"text\":\"Text\"},{\"link\":\"/en-US/component/root-portal\",\"text\":\"RootPortal\"}]},{\"text\":\"Navigation\",\"collapsed\":false,\"items\":[{\"link\":\"/en-US/component/pagination\",\"text\":\"Pagination\"},{\"link\":\"/en-US/component/popover\",\"text\":\"Popover\"},{\"link\":\"/en-US/component/tabs\",\"text\":\"Tabs\"},{\"link\":\"/en-US/component/segmented\",\"text\":\"Segmented\"},{\"link\":\"/en-US/component/tabbar\",\"text\":\"Tabbar\"},{\"link\":\"/en-US/component/navbar\",\"text\":\"Navbar\"},{\"link\":\"/en-US/component/sidebar\",\"text\":\"Sidebar\"},{\"link\":\"/en-US/component/backtop\",\"text\":\"Backtop\"},{\"link\":\"/en-US/component/index-bar\",\"text\":\"IndexBar\"}]},{\"text\":\"Data Input\",\"collapsed\":false,\"items\":[{\"link\":\"/en-US/component/calendar\",\"text\":\"Calendar\"},{\"link\":\"/en-US/component/calendar-view\",\"text\":\"CalendarView\"},{\"link\":\"/en-US/component/checkbox\",\"text\":\"Checkbox\"},{\"link\":\"/en-US/component/col-picker\",\"text\":\"ColPicker\"},{\"link\":\"/en-US/component/datetime-picker\",\"text\":\"DatetimePicker\"},{\"link\":\"/en-US/component/datetime-picker-view\",\"text\":\"DatetimePickerView\"},{\"link\":\"/en-US/component/form\",\"text\":\"Form\"},{\"link\":\"/en-US/component/input\",\"text\":\"Input\"},{\"link\":\"/en-US/component/textarea\",\"text\":\"Textarea\"},{\"link\":\"/en-US/component/input-number\",\"text\":\"InputNumber\"},{\"link\":\"/en-US/component/picker\",\"text\":\"Picker\"},{\"link\":\"/en-US/component/picker-view\",\"text\":\"PickerView\"},{\"link\":\"/en-US/component/radio\",\"text\":\"Radio\"},{\"link\":\"/en-US/component/rate\",\"text\":\"Rate\"},{\"link\":\"/en-US/component/search\",\"text\":\"Search\"},{\"link\":\"/en-US/component/select-picker\",\"text\":\"SelectPicker\"},{\"link\":\"/en-US/component/slider\",\"text\":\"Slider\"},{\"link\":\"/en-US/component/switch\",\"text\":\"Switch\"},{\"link\":\"/en-US/component/upload\",\"text\":\"Upload\"},{\"link\":\"/en-US/component/password-input\",\"text\":\"PasswordInput\"},{\"link\":\"/en-US/component/signature\",\"text\":\"Signature\"}]},{\"text\":\"Feedback\",\"collapsed\":false,\"items\":[{\"link\":\"/en-US/component/action-sheet\",\"text\":\"ActionSheet\"},{\"link\":\"/en-US/component/drop-menu\",\"text\":\"DropMenu\"},{\"link\":\"/en-US/component/floating-panel\",\"text\":\"FloatingPanel\"},{\"link\":\"/en-US/component/loading\",\"text\":\"Loading\"},{\"link\":\"/en-US/component/message-box\",\"text\":\"MessageBox\"},{\"link\":\"/en-US/component/notice-bar\",\"text\":\"NoticeBar\"},{\"link\":\"/en-US/component/overlay\",\"text\":\"Overlay\"},{\"link\":\"/en-US/component/progress\",\"text\":\"Progress\"},{\"link\":\"/en-US/component/circle\",\"text\":\"Circle\"},{\"link\":\"/en-US/component/sort-button\",\"text\":\"SortButton\"},{\"link\":\"/en-US/component/status-tip\",\"text\":\"StatusTip\"},{\"link\":\"/en-US/component/swipe-action\",\"text\":\"SwipeAction\"},{\"link\":\"/en-US/component/toast\",\"text\":\"Toast\"},{\"link\":\"/en-US/component/notify\",\"text\":\"Notify\"},{\"link\":\"/en-US/component/tooltip\",\"text\":\"Tooltip\"},{\"link\":\"/en-US/component/count-down\",\"text\":\"CountDown\"},{\"link\":\"/en-US/component/count-to\",\"text\":\"CountTo\"},{\"link\":\"/en-US/component/keyboard\",\"text\":\"Keyboard\"},{\"link\":\"/en-US/component/number-keyboard\",\"text\":\"NumberKeyboard\"}]},{\"text\":\"Data Display\",\"collapsed\":false,\"items\":[{\"link\":\"/en-US/component/badge\",\"text\":\"Badge\"},{\"link\":\"/en-US/component/card\",\"text\":\"Card\"},{\"link\":\"/en-US/component/cell\",\"text\":\"Cell\"},{\"link\":\"/en-US/component/collapse\",\"text\":\"Collapse\"},{\"link\":\"/en-US/component/curtain\",\"text\":\"Curtain\"},{\"link\":\"/en-US/component/divider\",\"text\":\"Divider\"},{\"link\":\"/en-US/component/gap\",\"text\":\"Gap\"},{\"link\":\"/en-US/component/img\",\"text\":\"Img\"},{\"link\":\"/en-US/component/img-cropper\",\"text\":\"ImgCropper\"},{\"link\":\"/en-US/component/grid\",\"text\":\"Grid\"},{\"link\":\"/en-US/component/loadmore\",\"text\":\"Loadmore\"},{\"link\":\"/en-US/component/skeleton\",\"text\":\"Skeleton\"},{\"link\":\"/en-US/component/steps\",\"text\":\"Steps\"},{\"link\":\"/en-US/component/sticky\",\"text\":\"Sticky\"},{\"link\":\"/en-US/component/tag\",\"text\":\"Tag\"},{\"link\":\"/en-US/component/watermark\",\"text\":\"Watermark\"},{\"link\":\"/en-US/component/swiper\",\"text\":\"Swiper\"},{\"link\":\"/en-US/component/table\",\"text\":\"Table\"}]},{\"text\":\"Composables\",\"items\":[{\"text\":\"useUpload\",\"link\":\"/en-US/component/use-upload\"},{\"text\":\"useCountDown\",\"link\":\"/en-US/component/use-count-down\"},{\"text\":\"useToast\",\"link\":\"/en-US/component/use-toast\"},{\"text\":\"useMessage\",\"link\":\"/en-US/component/use-message\"}]}]}}}},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink