From 605906ce933b8cfeba37ebe4d7da3f723806cf2a Mon Sep 17 00:00:00 2001 From: yandadaFreedom Date: Thu, 23 Jul 2026 15:31:19 +0800 Subject: [PATCH 1/4] feat(web): support swiper indicator options --- docs-vitepress/guide/advance/platform.md | 3 +- .../lib/runtime/components/web/mpx-swiper.vue | 63 +++++++++++++++---- 2 files changed, 52 insertions(+), 14 deletions(-) diff --git a/docs-vitepress/guide/advance/platform.md b/docs-vitepress/guide/advance/platform.md index 5f892ef13b..f6898d5bf5 100644 --- a/docs-vitepress/guide/advance/platform.md +++ b/docs-vitepress/guide/advance/platform.md @@ -608,7 +608,7 @@ radio|是 radio-group|是 rich-text|是 scroll-view|是|scroll-view 输出 web 底层滚动依赖 [BetterScroll](https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html) 实现，支持额外传入以下属性：

`scroll-options`: object
可重写 BetterScroll 初始化基本配置
若出现无法滚动，可尝试手动传入 `{ observeDOM: true }`

`update-refresh`: boolean
Vue updated 钩子函数触发时，可用于重新计算 BetterScroll

tips: 当使用下拉刷新相关属性时，由于 Vue 数据响应机制的限制，在 web 侧可能出现下拉组件状态无法复原的问题，可尝试在 `refresherrefresh` 事件中，手动将 refresher-triggered 属性值设置为 true -swiper|是|swiper 输出 web 底层滚动依赖 [BetterScroll](https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html) 实现，支持额外传入以下属性：

`scroll-options`: object
可重写 BetterScroll 初始化基本配置
当滑动方向为横向滚动，希望在另一方向保留原生的滚动时，scroll-options 可尝试传入 `{ eventPassthrough: vertical }`，反之可将 eventPassthrough 设置为 `horizontal` +swiper|是|swiper 输出 web 底层滚动依赖 [BetterScroll](https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html) 实现，支持 `indicator-margin`、`indicator-spacing`、`indicator-radius`、`indicator-width`、`indicator-height`、`indicator-alignment` 和 `indicator-offset` 配置指示点样式与位置，其中 `indicator-alignment` 支持 `auto` 或长度为 2、取值范围为 `[-1, 1]` 的数组，`indicator-offset` 为 `[x, y]` 像素偏移量。

支持额外传入以下属性：

`scroll-options`: object
可重写 BetterScroll 初始化基本配置
当滑动方向为横向滚动，希望在另一方向保留原生的滚动时，scroll-options 可尝试传入 `{ eventPassthrough: vertical }`，反之可将 eventPassthrough 设置为 `horizontal` swiper-item|是 switch|是 slider|是 @@ -742,4 +742,3 @@ i18n|是 :---|--- wxs|支持 animation|支持组件的animation属性，支持所有animation对象方法(export、step、width、height、rotate、scale、skew、translate等等) - diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-swiper.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-swiper.vue index a30fbdb3f8..ac4963a7cc 100644 --- a/packages/webpack-plugin/lib/runtime/components/web/mpx-swiper.vue +++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-swiper.vue @@ -6,6 +6,19 @@ import throttle from 'lodash/throttle' import { processSize } from '../../utils' + function getSwiperIndicatorStyle (alignment, offset, margin, vertical) { + const [x, y] = alignment === 'auto' ? (vertical ? [1, 0] : [0, 1]) : alignment + const [offsetX, offsetY] = offset + const xRatio = (x + 1) / 2 + const yRatio = (y + 1) / 2 + + return { + left: `${xRatio * 100}%`, + top: `${yRatio * 100}%`, + transform: `translate(${-xRatio * 100}%, ${-yRatio * 100}%) translate(${offsetX - x * margin}px, ${offsetY - y * margin}px)` + } + } + BScroll.use(Slide) BScroll.use(ObserveDOM) @@ -21,6 +34,34 @@ type: String, default: '#000000' }, + indicatorMargin: { + type: Number, + default: 10 + }, + indicatorSpacing: { + type: Number, + default: 4 + }, + indicatorRadius: { + type: Number, + default: 4 + }, + indicatorWidth: { + type: Number, + default: 8 + }, + indicatorHeight: { + type: Number, + default: 8 + }, + indicatorAlignment: { + type: [Array, String], + default: 'auto' + }, + indicatorOffset: { + type: Array, + default: () => [0, 0] + }, autoplay: Boolean, current: { type: Number, @@ -99,6 +140,9 @@ _nextMargin () { return processSize(this.nextMargin) || 0 }, + _indicatorStyle () { + return getSwiperIndicatorStyle(this.indicatorAlignment, this.indicatorOffset, this.indicatorMargin, this.vertical) + } }, updated () { this.setCurrentChildLength() @@ -298,7 +342,11 @@ createElement('span', { class: 'mpx-swiper-dots-item', style: { - backgroundColor: i === this.currentIndex ? this.indicatorActiveColor : this.indicatorColor + backgroundColor: i === this.currentIndex ? this.indicatorActiveColor : this.indicatorColor, + margin: `${this.indicatorSpacing}px`, + width: `${this.indicatorWidth}px`, + height: `${this.indicatorHeight}px`, + borderRadius: `${this.indicatorRadius}px` } }) ) @@ -307,7 +355,8 @@ class: { 'mpx-swiper-dots': true, vertical: this.vertical - } + }, + style: this._indicatorStyle }, dotsItems) children.push(dots) } @@ -343,22 +392,12 @@ .mpx-swiper-dots position absolute - right 50% - bottom 4px - transform translateX(50%) display flex &.vertical - right 4px - bottom 50% - transform translateY(50%) flex-direction column .mpx-swiper-dots-item display block - margin 4px - width 8px - height 8px - border-radius 50% From 23ec40bfe7c221dae0ca11602514be8ec42b807d Mon Sep 17 00:00:00 2001 From: yandadaFreedom Date: Tue, 28 Jul 2026 19:46:47 +0800 Subject: [PATCH 2/4] docs: revert swiper indicator options update --- docs-vitepress/guide/advance/platform.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs-vitepress/guide/advance/platform.md b/docs-vitepress/guide/advance/platform.md index 919b5eefcb..2f681878fd 100644 --- a/docs-vitepress/guide/advance/platform.md +++ b/docs-vitepress/guide/advance/platform.md @@ -608,7 +608,7 @@ radio|是 radio-group|是 rich-text|是 scroll-view|是|scroll-view 输出 web 底层滚动依赖 [BetterScroll](https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html) 实现，支持额外传入以下属性：

`scroll-options`: object
可重写 BetterScroll 初始化基本配置
若出现无法滚动，可尝试手动传入 `{ observeDOM: true }`

`update-refresh`: boolean
Vue updated 钩子函数触发时，可用于重新计算 BetterScroll

tips: 当使用下拉刷新相关属性时，由于 Vue 数据响应机制的限制，在 web 侧可能出现下拉组件状态无法复原的问题，可尝试在 `refresherrefresh` 事件中，手动将 refresher-triggered 属性值设置为 true -swiper|是|swiper 输出 web 底层滚动依赖 [BetterScroll](https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html) 实现，支持 `indicator-margin`、`indicator-spacing`、`indicator-radius`、`indicator-width`、`indicator-height`、`indicator-alignment` 和 `indicator-offset` 配置指示点样式与位置，其中 `indicator-alignment` 支持 `auto` 或长度为 2、取值范围为 `[-1, 1]` 的数组，`indicator-offset` 为 `[x, y]` 像素偏移量。

支持额外传入以下属性：

`scroll-options`: object
可重写 BetterScroll 初始化基本配置
当滑动方向为横向滚动，希望在另一方向保留原生的滚动时，scroll-options 可尝试传入 `{ eventPassthrough: vertical }`，反之可将 eventPassthrough 设置为 `horizontal` +swiper|是|swiper 输出 web 底层滚动依赖 [BetterScroll](https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html) 实现，支持额外传入以下属性：

`scroll-options`: object
可重写 BetterScroll 初始化基本配置
当滑动方向为横向滚动，希望在另一方向保留原生的滚动时，scroll-options 可尝试传入 `{ eventPassthrough: vertical }`，反之可将 eventPassthrough 设置为 `horizontal` swiper-item|是 switch|是 slider|是 From 3034f2c022792be05f418086684f975a70d23337 Mon Sep 17 00:00:00 2001 From: yandadaFreedom Date: Thu, 10 Sep 2026 15:03:52 +0800 Subject: [PATCH 3/4] fix(web): correct swiper indicator spacing --- docs-vitepress/guide/advance/platform.md | 2 +- .../lib/runtime/components/web/mpx-swiper.vue | 12 +++++++++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/docs-vitepress/guide/advance/platform.md b/docs-vitepress/guide/advance/platform.md index 2f681878fd..92be6d044a 100644 --- a/docs-vitepress/guide/advance/platform.md +++ b/docs-vitepress/guide/advance/platform.md @@ -608,7 +608,7 @@ radio|是 radio-group|是 rich-text|是 scroll-view|是|scroll-view 输出 web 底层滚动依赖 [BetterScroll](https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html) 实现，支持额外传入以下属性：

`scroll-options`: object
可重写 BetterScroll 初始化基本配置
若出现无法滚动，可尝试手动传入 `{ observeDOM: true }`

`update-refresh`: boolean
Vue updated 钩子函数触发时，可用于重新计算 BetterScroll

tips: 当使用下拉刷新相关属性时，由于 Vue 数据响应机制的限制，在 web 侧可能出现下拉组件状态无法复原的问题，可尝试在 `refresherrefresh` 事件中，手动将 refresher-triggered 属性值设置为 true -swiper|是|swiper 输出 web 底层滚动依赖 [BetterScroll](https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html) 实现，支持额外传入以下属性：

`scroll-options`: object
可重写 BetterScroll 初始化基本配置
当滑动方向为横向滚动，希望在另一方向保留原生的滚动时，scroll-options 可尝试传入 `{ eventPassthrough: vertical }`，反之可将 eventPassthrough 设置为 `horizontal` +swiper|是|swiper 输出 web 底层滚动依赖 [BetterScroll](https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html) 实现。Web 端支持以下指示点属性：

`indicator-margin`: number，指示点与 swiper 边缘的距离，默认值为 `10`。
`indicator-spacing`: number，相邻指示点的间距，默认值为 `4`。
`indicator-radius`: number，指示点圆角半径，默认值为 `4`。
`indicator-width`: number，指示点宽度，默认值为 `8`。
`indicator-height`: number，指示点高度，默认值为 `8`。
`indicator-alignment`: `auto \| [number, number]`，默认值为 `auto`。数组表示 `[x, y]` 方向的对齐位置，两项的取值范围均为 `[-1, 1]`；`-1` 表示左侧/顶部，`0` 表示居中，`1` 表示右侧/底部。`auto` 在横向 swiper 中等同于 `[0, 1]`，在纵向 swiper 中等同于 `[1, 0]`。
`indicator-offset`: `[number, number]`，表示 `[x, y]` 方向的像素偏移量，默认值为 `[0, 0]`。

支持额外传入以下属性：

`scroll-options`: object
可重写 BetterScroll 初始化基本配置
当滑动方向为横向滚动，希望在另一方向保留原生的滚动时，scroll-options 可尝试传入 `{ eventPassthrough: vertical }`，反之可将 eventPassthrough 设置为 `horizontal` swiper-item|是 switch|是 slider|是 diff --git a/packages/webpack-plugin/lib/runtime/components/web/mpx-swiper.vue b/packages/webpack-plugin/lib/runtime/components/web/mpx-swiper.vue index ac4963a7cc..35e275317f 100644 --- a/packages/webpack-plugin/lib/runtime/components/web/mpx-swiper.vue +++ b/packages/webpack-plugin/lib/runtime/components/web/mpx-swiper.vue @@ -19,6 +19,13 @@ } } + function getSwiperIndicatorSpacingStyle (index, spacing, vertical) { + if (!index) return + return { + [vertical ? 'marginTop' : 'marginLeft']: `${spacing}px` + } + } + BScroll.use(Slide) BScroll.use(ObserveDOM) @@ -341,13 +348,12 @@ dotsItems.push( createElement('span', { class: 'mpx-swiper-dots-item', - style: { + style: Object.assign({ backgroundColor: i === this.currentIndex ? this.indicatorActiveColor : this.indicatorColor, - margin: `${this.indicatorSpacing}px`, width: `${this.indicatorWidth}px`, height: `${this.indicatorHeight}px`, borderRadius: `${this.indicatorRadius}px` - } + }, getSwiperIndicatorSpacingStyle(i, this.indicatorSpacing, this.vertical)) }) ) } From 4028ce975191925b178b3c2c4ad14bec30f47748 Mon Sep 17 00:00:00 2001 From: yandadaFreedom Date: Thu, 10 Sep 2026 15:08:12 +0800 Subject: [PATCH 4/4] docs(web): remove swiper indicator details --- docs-vitepress/guide/advance/platform.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs-vitepress/guide/advance/platform.md b/docs-vitepress/guide/advance/platform.md index 92be6d044a..2f681878fd 100644 --- a/docs-vitepress/guide/advance/platform.md +++ b/docs-vitepress/guide/advance/platform.md @@ -608,7 +608,7 @@ radio|是 radio-group|是 rich-text|是 scroll-view|是|scroll-view 输出 web 底层滚动依赖 [BetterScroll](https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html) 实现，支持额外传入以下属性：

`scroll-options`: object
可重写 BetterScroll 初始化基本配置
若出现无法滚动，可尝试手动传入 `{ observeDOM: true }`

`update-refresh`: boolean
Vue updated 钩子函数触发时，可用于重新计算 BetterScroll

tips: 当使用下拉刷新相关属性时，由于 Vue 数据响应机制的限制，在 web 侧可能出现下拉组件状态无法复原的问题，可尝试在 `refresherrefresh` 事件中，手动将 refresher-triggered 属性值设置为 true -swiper|是|swiper 输出 web 底层滚动依赖 [BetterScroll](https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html) 实现。Web 端支持以下指示点属性：

`indicator-margin`: number，指示点与 swiper 边缘的距离，默认值为 `10`。
`indicator-spacing`: number，相邻指示点的间距，默认值为 `4`。
`indicator-radius`: number，指示点圆角半径，默认值为 `4`。
`indicator-width`: number，指示点宽度，默认值为 `8`。
`indicator-height`: number，指示点高度，默认值为 `8`。
`indicator-alignment`: `auto \| [number, number]`，默认值为 `auto`。数组表示 `[x, y]` 方向的对齐位置，两项的取值范围均为 `[-1, 1]`；`-1` 表示左侧/顶部，`0` 表示居中，`1` 表示右侧/底部。`auto` 在横向 swiper 中等同于 `[0, 1]`，在纵向 swiper 中等同于 `[1, 0]`。
`indicator-offset`: `[number, number]`，表示 `[x, y]` 方向的像素偏移量，默认值为 `[0, 0]`。

支持额外传入以下属性：

`scroll-options`: object
可重写 BetterScroll 初始化基本配置
当滑动方向为横向滚动，希望在另一方向保留原生的滚动时，scroll-options 可尝试传入 `{ eventPassthrough: vertical }`，反之可将 eventPassthrough 设置为 `horizontal` +swiper|是|swiper 输出 web 底层滚动依赖 [BetterScroll](https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html) 实现，支持额外传入以下属性：

`scroll-options`: object
可重写 BetterScroll 初始化基本配置
当滑动方向为横向滚动，希望在另一方向保留原生的滚动时，scroll-options 可尝试传入 `{ eventPassthrough: vertical }`，反之可将 eventPassthrough 设置为 `horizontal` swiper-item|是 switch|是 slider|是