Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Tree: d189ca9658
Branches Tags
nutui
/
3.1.3
/
doc.df2bf89d.js

doc.df2bf89d.js 13 KB
History Raw

1 
  1. import{e as s,o as a,G as t}from"./vendor.f7062dc0.js";const n={class:"markdown-body"},l=[t('<h1>Swiper 轮播</h1><h3>介绍</h3><p>常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。</p><h3>安装</h3><pre><code class="language-javascript"><span class="hljs-keyword">import</span> { createApp } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;vue&#39;</span>;\n<span class="hljs-keyword">import</span> { Swiper } <span class="hljs-keyword">from</span> <span class="hljs-string">&#39;@nutui/nutui&#39;</span>;\n\n<span class="hljs-keyword">const</span> app = createApp();\napp.use(Swiper);\n</code></pre><h2>代码演示</h2><h3>基础用法</h3><p><code>auto-play</code> 自动轮播的时长 <code>init-page</code> 初始索引值 <code>pagination-visible</code> 是否显示分页指示器 <code>pagination-color</code> 指示器颜色自定义</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper</span> <span class="hljs-attr">:init-page</span>=<span class="hljs-string">&quot;state.page&quot;</span> <span class="hljs-attr">:pagination-visible</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">pagination-color</span>=<span class="hljs-string">&quot;#426543&quot;</span> <span class="hljs-attr">auto-play</span>=<span class="hljs-string">&quot;3000&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg&#39;&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://storage.360buyimg.com/jdc-article/welcomenutui.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://storage.360buyimg.com/jdc-article/fristfabu.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper</span>&gt;</span>\n</code></pre><h3>自定义大小</h3><p><code>width</code> 自定义轮播大小</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper</span> <span class="hljs-attr">:init-page</span>=<span class="hljs-string">&quot;state.page2&quot;</span> <span class="hljs-attr">:loop</span>=<span class="hljs-string">&quot;false&quot;</span> <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;300&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg&#39;&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://storage.360buyimg.com/jdc-article/welcomenutui.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://storage.360buyimg.com/jdc-article/fristfabu.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper</span>&gt;</span>\n</code></pre><h3>自定义分页指示器</h3><p><code>v-slot:page</code> 表示自定义指示器</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper</span> <span class="hljs-attr">:init-page</span>=<span class="hljs-string">&quot;state.page3&quot;</span> <span class="hljs-attr">:loop</span>=<span class="hljs-string">&quot;true&quot;</span> @<span class="hljs-attr">change</span>=<span class="hljs-string">&quot;change&quot;</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg&#39;&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://storage.360buyimg.com/jdc-article/welcomenutui.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://storage.360buyimg.com/jdc-article/fristfabu.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">template</span> <span class="hljs-attr">v-slot:page</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;page&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper</span>&gt;</span>\n</code></pre><h3>垂直方向</h3><p><code>direction</code> 自定义轮播方向</p><pre><code class="language-html"><span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper</span> <span class="hljs-attr">:init-page</span>=<span class="hljs-string">&quot;state.page4&quot;</span> <span class="hljs-attr">:loop</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">auto-play</span>=<span class="hljs-string">&quot;3000&quot;</span> <span class="hljs-attr">direction</span>=<span class="hljs-string">&quot;vertical&quot;</span> <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;150&quot;</span> <span class="hljs-attr">:pagination-visible</span>=<span class="hljs-string">&quot;true&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;height: 150px&quot;</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg&#39;&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://storage.360buyimg.com/jdc-article/welcomenutui.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n  <span class="hljs-tag">&lt;<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://storage.360buyimg.com/jdc-article/fristfabu.jpg&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> /&gt;</span>\n  <span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper-item</span>&gt;</span>\n<span class="hljs-tag">&lt;/<span class="hljs-name">nut-swiper</span>&gt;</span>\n</code></pre><h2>API</h2><h3>Props</h3><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>width</td><td>轮播卡片的宽度</td><td>Number、String</td><td>window.innerWidth</td></tr><tr><td>height</td><td>轮播卡片的高度</td><td>String、Number</td><td>0</td></tr><tr><td>direction</td><td>轮播方向,可选值<code>horizontal</code>,<code>vertical</code></td><td>String</td><td>‘horizontal’</td></tr><tr><td>pagination-visible</td><td>分页指示器是否展示</td><td>Boolean</td><td>false</td></tr><tr><td>pagination-color</td><td>分页指示器选中的颜色</td><td>String</td><td>‘#fff’</td></tr><tr><td>loop</td><td>是否循环轮播</td><td>Boolean</td><td>true</td></tr><tr><td>duration</td><td>动画时长（单位是ms）</td><td>Number、String</td><td>500</td></tr><tr><td>auto-play</td><td>自动轮播时长，0表示不会自动轮播</td><td>Number、String</td><td>0</td></tr><tr><td>init-page</td><td>初始化索引值</td><td>Number、String</td><td>0</td></tr><tr><td>touchable</td><td>是否可触摸滑动</td><td>Boolean</td><td>true</td></tr><tr><td>is-preventDefault</td><td>滑动过程中是否禁用默认事件</td><td>Boolean</td><td>true</td></tr><tr><td>is-stopPropagation</td><td>滑动过程中是否禁止冒泡</td><td>Boolean</td><td>true</td></tr></tbody></table><h3>Events</h3><table><thead><tr><th>事件名</th><th>说明</th><th>回调参数</th></tr></thead><tbody><tr><td>change</td><td>滑动之后的回调</td><td>当前索引值index</td></tr></tbody></table><h3>API</h3><table><thead><tr><th>事件名</th><th>说明</th><th>参数</th></tr></thead><tbody><tr><td>prev</td><td>切换到上一页</td><td>-</td></tr><tr><td>next</td><td>切换到下一页</td><td>-</td></tr><tr><td>to</td><td>切换到指定轮播</td><td>index:number</td></tr></tbody></table>',25)],p={setup:(t,{expose:p})=>(p({frontmatter:{}}),(t,p)=>(a(),s("div",n,l)))};export{p as default};
    2.