# Swiper 轮播图

此组件一般用于导航轮播,广告展示等场景

# list 数据结构

list: [{
	image: 'https://dnvue.dengqichang.cn/file/imgs/banner.png', //轮播图片地址
	title: '第一张banner轮播图' //轮播图标题
}, {
	image: 'https://dnvue.dengqichang.cn/file/imgs/banner.png',
	title: '第二张banner轮播图'
}, {
	image: 'https://dnvue.dengqichang.cn/file/imgs/banner.png',
	title: '第三张banner轮播图'
}]

# 基本使用

通过 <n-swiper> 形式调用,使用 list 参数数据显示轮播图

<template>
	<view>
		<n-swiper :list="list"></n-swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					image: 'https://dnvue.dengqichang.cn/file/imgs/banner.png',
					title: '第一张banner轮播图'
				}, {
					image: 'https://dnvue.dengqichang.cn/file/imgs/banner.png',
					title: '第二张banner轮播图'
				}, {
					image: 'https://dnvue.dengqichang.cn/file/imgs/banner.png',
					title: '第三张banner轮播图'
				}]
			}
		},
		methods: {

		}
	}
</script>

# 指示点类型

通过 mode 参数来设置轮播图的指示点类型

  • number 数字
  • dot 圆点
  • strip 长块
  • text 文本
  • none 不显示指示点

通过 indicator-location 参数设置指示点的显示位置

  • left 左侧
  • center 居中
  • right 右侧
<template>
	<view>
		<n-swiper :list="list" mode="number" indicator-location="right"></n-swiper>
	</view>
</template>

# 轮播图大小

可通过 width , height 参数来设置轮播的大小

<template>
	<view>
		<n-swiper :list="list" width="700" height="250"></n-swiper>
	</view>
</template>

# 轮播图圆角

通过 radius 参数设置轮播图的圆角

<template>
	<view>
		<n-swiper :list="list" width="700" radius="12"></n-swiper>
	</view>
</template>

# API

# Attribute 参数

参数 说明 类型 可选值 默认值
list 轮播图 list 数据 Object, Array - -
placeholder 1.0.9 轮播图片未加载时的占位图 String - -
mode 指示点类型 String number、dot、strip、text、none strip
radius 轮播图圆角 Number, String - -
indicator-location 指示点位置 String left、center、right center
indicator-color 指示点颜色 String - rgba(0, 0, 0, 0.3)
indicator-active-color 指示点激活颜色 String - #ffffff
height 轮播图高度 - 300
width 轮播图宽度 - 750
current 当前所在滑块的 index - 0
autoplay 是否自动切换 false true
interval 自动切换时间间隔 5000
circular 是否采用衔接滑动,即播放到末尾后重新回到开头 false true
vertical 滑动方向是否为纵向 true false

# Event 事件

事件名 说明 返回值
@change 轮播图切换时触发 {index: 当前轮播图下标}
@click 点击轮播图时触发 {index: 当前轮播图下标}