guanmao-wxapp/uni_modules/uni-swiper-dot

SwiperDot 轮播图指示点

组件名：uni-swiper-dot 代码块： uSwiperDot

自定义轮播图指示点

注意事项 为了避免错误使用，给大家带来不好的开发体验，请在使用组件前仔细阅读下面的注意事项，可以帮你避免一些错误。

• 本组件依赖 swiper 组件,请与swiper组件配合使用
• width 与 height 如非必要，请勿设置过大，或者过小
• swiper-item 尽量控制在一定数量之内，否则指示点可能会超出屏幕
• 暂不支持垂直方向的指示点

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

如需通过npm方式使用uni-ui组件，另见文档：https://ext.dcloud.net.cn/plugin?id=55

基本用法

在 template 中的使用

<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
	<swiper class="swiper-box" @change="change">
		<swiper-item v-for="(item ,index) in info" :key="index">
			<view class="swiper-item">
				{{item.content}}
			</view>
		</swiper-item>
	</swiper>
</uni-swiper-dot>

export default {
	data() {
		return {
			info: [{
				content: '内容 A'
			}, {
				content: '内容 B'
			}, {
				content: '内容 C'
			}],
			current: 0,
			mode: 'round',
		}
	},
	methods: {
		change(e) {
			this.current = e.detail.current;
		}
	}
}

API

SwiperDod Props

属性名	类型	默认值	说明
current	Number	0	当前指示点索引，必须是通过 swiper 的 change 事件获取到的 e.detail.current
mode	String	default	指示点的类型，可选值：default 、round 、nav 、 indexes
field	String	-	mode 为 nav 时，显示的内容字段（mode = nav 时必填）
info	Array	-	轮播图的数据，通过数组长度决定指示点个数
dotsStyles	Object	-	指示点样式

dotsStyles Options

属性名	类型	默认值	说明
width	Number	8	指示点宽度 在 mode = nav、mode = indexes 时不生效
bottom	Number	10	指示点距 swiper 底部的高度
color	Color	'#fff'	指示点前景色，只在 mode = nav ，mode = indexes 时生效
backgroundColor	Color	'rgba(0, 0, 0, .3)'	未选择指示点背景色
border	Border	'1px rgba(0, 0, 0, .3) solid'	未选择指示点边框样式
selectedBackgroundColor	Color	'#333'	已选择指示点背景色，在 mode = nav 时不生效
selectedBorder	Border	'1px rgba(0, 0, 0, .9) solid'	已选择指示点边框样式，在 mode = nav 时不生效

组件示例

点击查看：https://hellouniapp.dcloud.net.cn/pages/extUI/swiper-dot/swiper-dot