| 1 |
- import{c as t,o,C as e}from"./vendor.0d0a34e4.js";const u={class:"markdown-body"},i=e('<h1>Swiper 轮播</h1><h3>介绍</h3><p>常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。</p><h3>安装</h3><pre><code class="language-javascript">import { createApp } from 'vue';\nimport { Swiper } from '@nutui/nutui-taro';\n\nconst app = createApp();\napp.use(Swiper);\n</code></pre><h2>代码演示</h2><h3>基础用法</h3><p><code>autoplay</code> 是否自动切换 <code>interval</code> 自动切换时间间隔 <code>current</code> 当前所在滑块的 index <code>indicator-dots</code> 是否显示面板指示点 <code>indicator-color</code> 指示点颜色</p><pre><code class="language-html"><nut-swiper current="1" indicator-dots="true" indicator-color="#426543" autoplay="true" interval="3000">\n <nut-swiper-item>\n <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />\n </nut-swiper-item>\n <nut-swiper-item>\n <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />\n </nut-swiper-item>\n <nut-swiper-item>\n <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />\n </nut-swiper-item>\n <nut-swiper-item>\n <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />\n </nut-swiper-item>\n</nut-swiper>\n</code></pre><h3>自定义大小</h3><p><code>previous-margin</code> 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值 <code>next-margin</code> 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值</p><pre><code class="language-html"><nut-swiper previous-margin="10px" next-margin="10px">\n <nut-swiper-item>\n <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />\n </nut-swiper-item>\n <nut-swiper-item>\n <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />\n </nut-swiper-item>\n <nut-swiper-item>\n <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />\n </nut-swiper-item>\n <nut-swiper-item>\n <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />\n </nut-swiper-item>\n</nut-swiper>\n</code></pre><h3>垂直方向</h3><p><code>vertical</code> 滑动方向是否为纵向</p><pre><code class="language-html"><nut-swiper vertical="true">\n <nut-swiper-item>\n <img src="https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg" alt="" />\n </nut-swiper-item>\n <nut-swiper-item>\n <img src="https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg'" alt="" />\n </nut-swiper-item>\n <nut-swiper-item>\n <img src="https://storage.360buyimg.com/jdc-article/welcomenutui.jpg" alt="" />\n </nut-swiper-item>\n <nut-swiper-item>\n <img src="https://storage.360buyimg.com/jdc-article/fristfabu.jpg" alt="" />\n </nut-swiper-item>\n</nut-swiper>\n</code></pre><h4>API <a href="https://docs.taro.zone/docs/components/viewContainer/swiper">参考文档</a></h4>',16),r={setup:e=>(e,r)=>(o(),t("div",u,[i]))};export default r;
|
