更新记录

1.1.0(2021-07-30)

1.0.6(2021-05-12)

  • 新增 示例地址
  • 修复 示例项目缺少组件的Bug
查看更多

平台兼容性

Vue2 Vue3
App 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 快应用
app-vue app-nvue ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

SwiperDot 轮播图指示点

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

自定义轮播图指示点

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

  • 本组件依赖 swiper 组件,请与swiper组件配合使用
  • widthheight 如非必要,请勿设置过大,或者过小
  • 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 当前指示点索引,必须是通过 swiperchange 事件获取到的 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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问