更新记录

0.0.3（2025-08-31） 下载此版本

• chore: 更新文档

0.0.2（2025-04-25） 下载此版本

• feat: 兼容uniappx 鸿蒙next

0.0.1（2025-02-28） 下载此版本

• init

平台兼容性

uni-app(4.75)

uni-app x(4.75)

其他

lime-swiper-dot 轮播图指示点组件

一个功能丰富的轮播图指示点组件，用于展示轮播图的当前位置。支持多种指示器类型、自定义颜色、标题显示等多种配置，可用于图片轮播、广告轮播、产品展示等多种场景。组件提供了丰富的自定义选项，可以满足各种轮播指示需求。

插件依赖：lime-shared、lime-style

文档链接

📚 组件详细文档请访问以下站点：

• 轮播图指示点组件文档 - 站点1
• 轮播图指示点组件文档 - 站点2
• 轮播图指示点组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-swiper-dot
2. 导入后可能需要重新编译项目
3. 在页面中使用l-swiper-dot组件

代码演示

基础用法

最简单的轮播图指示点组件用法，使用相对定位的容器包裹轮播组件和指示器组件。

<view style="position: relative">
  <swiper style="height: 300rpx" :current="current" @change="onChange" :autoplay="true" :interval="3000">
    <swiper-item class="slide slide1"><text class="text">1</text></swiper-item>
    <swiper-item class="slide slide2"><text class="text">2</text></swiper-item>
    <swiper-item class="slide slide3"><text class="text">3</text></swiper-item>
  </swiper>
  <l-swiper-dot :current="current" type="dot" :total="3" />
</view>

const current = ref(0)
const type = ref('dot')
const onChange = (e: UniSwiperChangeEvent) => {
    current.value = e.detail.current
}

不同类型的指示器

通过type属性设置不同类型的指示器。

<!-- 圆点指示器 -->
<l-swiper-dot :current="current" type="dot" :total="3" />

<!-- 条形指示器 -->
<l-swiper-dot :current="current" type="dot-bar" :total="3" />

<!-- 数字索引指示器 -->
<l-swiper-dot :current="current" type="index" :total="3" />

<!-- 分式指示器 -->
<l-swiper-dot :current="current" type="fraction" :total="3" />

<!-- 标题指示器 -->
<l-swiper-dot :current="current" type="title" :list="list" field="title" />

标题指示器

使用标题类型指示器，需要提供带有标题字段的数据列表。

<view style="position: relative">
  <swiper style="height: 300rpx" :current="current" @change="onChange">
    <swiper-item v-for="(item, index) in list" :key="index" class="slide">
      <text class="text">{{index + 1}}</text>
    </swiper-item>
  </swiper>
  <l-swiper-dot :current="current" type="title" :list="list" field="title" />
</view>

export default {
  data() {
    return {
      current: 0,
      list: [
        { title: '人生得意须尽欢，莫使金樽空对月' },
        { title: '但愿人长久，千里共婵娟' },
        { title: '无边落木萧萧下，不尽长江滚滚来' }
      ]
    }
  },
  methods: {
    onChange(e) {
      this.current = e.detail.current
    }
  }
}

自定义颜色

使用 color可设置文本颜色， activeColor可设置激活状态指示点颜色，inactiveColor默认背景色

<view style="position: relative">
    <swiper style="height: 300rpx" :current="current" @change="onChange" :autoplay="true" :interval="3000">
        <swiper-item class="slide slide1"><text class="text">1</text></swiper-item>
        <swiper-item class="slide slide2"><text class="text">2</text></swiper-item>
        <swiper-item class="slide slide3"><text class="text">3</text></swiper-item>
    </swiper>
    <l-swiper-dot  activeColor="#ff6b6b" inactiveColor="#ffe66d" color="#2d3436"  :current="current" type="title" :list="list" field="title" />
</view>

const current = ref(0)
const type = ref('dot')
const onChange = (e: UniSwiperChangeEvent) => {
    current.value = e.detail.current
}
const list = [
    {
        title: '人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。',
    },
    {
        title: '但愿人长久，千里共婵娟。',
    },
    {
        title: '无边落木萧萧下，不尽长江滚滚来。万里悲秋常作客，百年多病独登台。',
    },
]

自定义文字大小

通过fontSize属性设置指示器文字的大小。

<l-swiper-dot 
  :current="current" 
  type="title" 
  :list="list" 
  field="title" 
  fontSize="16px" 
/>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-swiper-dot/components/lime-swiper-dot -->
<lime-swiper-dot />

插件标签说明

Vue2使用说明

main.js中添加以下代码：

// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档

Props 属性说明

指示器类型说明

主题定制

组件提供了以下CSS变量，可用于自定义样式：

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助