import{e as a,o as t,G as n}from"./vendor.js";const l={class:"markdown-body"},p=n(`

Swiper \u8F6E\u64AD

\u4ECB\u7ECD

\u5E38\u7528\u4E8E\u4E00\u7EC4\u56FE\u7247\u6216\u5361\u7247\u8F6E\u64AD\uFF0C\u5F53\u5185\u5BB9\u7A7A\u95F4\u4E0D\u8DB3\u65F6\uFF0C\u53EF\u4EE5\u7528\u8D70\u9A6C\u706F\u7684\u5F62\u5F0F\u8FDB\u884C\u6536\u7EB3\uFF0C\u8FDB\u884C\u8F6E\u64AD\u5C55\u73B0\u3002

\u5B89\u88C5

import { createApp } from 'vue';
import { Swiper,SwiperItem } from '@nutui/nutui';

const app = createApp();
app.use(Swiper);
app.use(SwiperItem);

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

auto-play \u81EA\u52A8\u8F6E\u64AD\u7684\u65F6\u957F init-page \u521D\u59CB\u7D22\u5F15\u503C pagination-visible \u662F\u5426\u663E\u793A\u5206\u9875\u6307\u793A\u5668 pagination-color \u6307\u793A\u5668\u989C\u8272\u81EA\u5B9A\u4E49

<nut-swiper :init-page="state.page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
  <nut-swiper-item>
    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
  </nut-swiper-item>
  <nut-swiper-item>
    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
  </nut-swiper-item>
  <nut-swiper-item>
    <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
  </nut-swiper-item>
  <nut-swiper-item>
    <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
  </nut-swiper-item>
</nut-swiper>

\u81EA\u5B9A\u4E49\u5927\u5C0F

width \u81EA\u5B9A\u4E49\u8F6E\u64AD\u5927\u5C0F

<nut-swiper :init-page="state.page2" :loop="false" width="300">
  <nut-swiper-item>
    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
  </nut-swiper-item>
  <nut-swiper-item>
    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
  </nut-swiper-item>
  <nut-swiper-item>
    <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
  </nut-swiper-item>
  <nut-swiper-item>
    <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
  </nut-swiper-item>
</nut-swiper>

\u81EA\u5B9A\u4E49\u5206\u9875\u6307\u793A\u5668

v-slot:page \u8868\u793A\u81EA\u5B9A\u4E49\u6307\u793A\u5668

<nut-swiper :init-page="state.page3" :loop="true" @change="change">
    <nut-swiper-item>
    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
  </nut-swiper-item>
  <nut-swiper-item>
    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
  </nut-swiper-item>
  <nut-swiper-item>
    <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
  </nut-swiper-item>
  <nut-swiper-item>
    <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
  </nut-swiper-item>
  <template v-slot:page>
    <div class="page"></div>
  </template>
</nut-swiper>

\u5782\u76F4\u65B9\u5411

direction \u81EA\u5B9A\u4E49\u8F6E\u64AD\u65B9\u5411

<nut-swiper :init-page="state.page4" :loop="true" auto-play="3000" direction="vertical" height="150" :pagination-visible="true" style="height: 150px">
  <nut-swiper-item>
    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />
  </nut-swiper-item>
  <nut-swiper-item>
    <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />
  </nut-swiper-item>
  <nut-swiper-item>
    <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />
  </nut-swiper-item>
  <nut-swiper-item>
    <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />
  </nut-swiper-item>
</nut-swiper>

API

Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
width	\u8F6E\u64AD\u5361\u7247\u7684\u5BBD\u5EA6	Number\u3001String	window.innerWidth
height	\u8F6E\u64AD\u5361\u7247\u7684\u9AD8\u5EA6	String\u3001Number	0
direction	\u8F6E\u64AD\u65B9\u5411,\u53EF\u9009\u503C`horizontal`,`vertical`	String	\u2018horizontal\u2019
pagination-visible	\u5206\u9875\u6307\u793A\u5668\u662F\u5426\u5C55\u793A	Boolean	false
pagination-color	\u5206\u9875\u6307\u793A\u5668\u9009\u4E2D\u7684\u989C\u8272	String	\u2018#fff\u2019
loop	\u662F\u5426\u5FAA\u73AF\u8F6E\u64AD	Boolean	true
duration	\u52A8\u753B\u65F6\u957F\uFF08\u5355\u4F4D\u662Fms\uFF09	Number\u3001String	500
auto-play	\u81EA\u52A8\u8F6E\u64AD\u65F6\u957F\uFF0C0\u8868\u793A\u4E0D\u4F1A\u81EA\u52A8\u8F6E\u64AD	Number\u3001String	0
init-page	\u521D\u59CB\u5316\u7D22\u5F15\u503C	Number\u3001String	0
touchable	\u662F\u5426\u53EF\u89E6\u6478\u6ED1\u52A8	Boolean	true
is-preventDefault	\u6ED1\u52A8\u8FC7\u7A0B\u4E2D\u662F\u5426\u7981\u7528\u9ED8\u8BA4\u4E8B\u4EF6	Boolean	true
is-stopPropagation	\u6ED1\u52A8\u8FC7\u7A0B\u4E2D\u662F\u5426\u7981\u6B62\u5192\u6CE1	Boolean	true

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
change	\u6ED1\u52A8\u4E4B\u540E\u7684\u56DE\u8C03	\u5F53\u524D\u7D22\u5F15\u503Cindex

API

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u53C2\u6570
prev	\u5207\u6362\u5230\u4E0A\u4E00\u9875	-
next	\u5207\u6362\u5230\u4E0B\u4E00\u9875	-
to	\u5207\u6362\u5230\u6307\u5B9A\u8F6E\u64AD	index:number

`,25),c=[p],j={setup(e,{expose:s}){return s({frontmatter:{}}),(h,g)=>(t(),a("div",l,c))}};export{j as default};