fix(components): 更新 swiper 的修复

packages/taro-components/__tests__/swiper.spec.js

@@ -178,10 +178,10 @@ describe('Swiper', () => {
  )
 
  const wrapper = await mount(app, scratch)
- const swiper = wrapper.find('.swiper-wrapper')
+ const swiper = wrapper.find('.swiper-container')
  const swiperStyles = window.getComputedStyle(swiper)
 
- assert(swiperStyles.transform === `matrix(1, 0, 0, 1, ${previousMargin}, 0)`)
+ assert(swiperStyles.marginLeft === `${previousMargin}px`)
  })
 
  it('should display multi items within screen width', async () => {

packages/taro-components/src/components.d.ts

@@ -214,6 +214,10 @@ export namespace Components {
  */
  'interval': number;
  /**
+ * 后边距，可用于露出后一项的一小部分，接受 px 值
+ */
+ 'nextMargin': string;
+ /**
  * 前边距，可用于露出前一项的一小部分，接受 px 值
  */
  'previousMargin': string;
@@ -864,6 +868,10 @@ declare namespace LocalJSX {
  * 自动切换时间间隔
  */
  'interval'?: number;
+ /**
+ * 后边距，可用于露出后一项的一小部分，接受 px 值
+ */
+ 'nextMargin'?: string;
  'onAnimationfinish'?: (event: CustomEvent<any>) => void;
  'onChange'?: (event: CustomEvent<any>) => void;
  /**

packages/taro-components/src/components/swiper/swiper.tsx

@@ -66,6 +66,11 @@ export class Swiper implements ComponentInterface {
  */
  @Prop() previousMargin = '0px'
 
+ /**
+ * 后边距，可用于露出后一项的一小部分，接受 px 值
+ */
+ @Prop() nextMargin = '0px'
+
  /**
  * 同时显示的滑块数量
  */
@@ -86,12 +91,13 @@ export class Swiper implements ComponentInterface {
 
  @Watch('current')
  watchCurrent (newVal) {
- if (typeof newVal !== 'number' && !isNaN(newVal)) return
+ const n = parseInt(newVal, 10)
+ if (isNaN(n)) return
 
  if (this.circular) {
- this.swiper.slideToLoop(newVal)
+ this.swiper.slideToLoop(n) // 更新下标
  } else {
- this.swiper.slideTo(newVal)
+ this.swiper.slideTo(n) // 更新下标
  }
  }
 
@@ -135,13 +141,14 @@ export class Swiper implements ComponentInterface {
  const that = this
 
  const options: any = {
- pagination: { el: `.taro-swiper-${this._id} .swiper-pagination` },
+ pagination: { el: `.taro-swiper-${this._id} > .swiper-container > .swiper-pagination` },
  direction: vertical ? 'vertical' : 'horizontal',
  loop: circular,
  slidesPerView: displayMultipleItems,
  initialSlide: current,
  speed: duration,
  observer: true,
+ observeParents: true,
  on: {
  // slideChange 事件在 swiper.slideTo 改写 current 时不触发，因此用 slideChangeTransitionEnd 事件代替
  slideChangeTransitionEnd () {
@@ -155,15 +162,17 @@ export class Swiper implements ComponentInterface {
  current: this.realIndex,
  source: ''
  })
+ },
+ observerUpdate (e) {
+ if (e.target && e.target.className === 'taro_page' && e.target.style.display === 'block') {
+ if (that.autoplay && e.target.contains(this.$el[0])) {
+ this.slideTo(that.current)
+ }
+ }
  }
  }
  }
 
- const previousMargin = /^(\d+)px/.exec(this.previousMargin)
- if (previousMargin?.length && !isNaN(parseInt(previousMargin[1]))) {
- options.slidesOffsetBefore = parseInt(previousMargin[1])
- }
-
  // 自动播放
  if (autoplay) {
  options.autoplay = {
@@ -172,45 +181,62 @@ export class Swiper implements ComponentInterface {
  }
  }
 
- this.swiper = new Swipers(`.taro-swiper-${this._id}`, options)
+ this.swiper = new Swipers(`.taro-swiper-${this._id} > .swiper-container`, options)
+ }
+
+ componentWillUpdate () {
+ if (this.autoplay && !this.swiper.autoplay.paused) {
+ this.swiper.autoplay.run()
+ this.swiper.autoplay.paused = false
+ }
+ this.swiper.update() // 更新子元素
  }
 
  render () {
  const {
+ vertical,
  indicatorDots,
  indicatorColor,
  indicatorActiveColor
  } = this
 
- const cls = classNames(`taro-swiper-${this._id}`, 'swiper-container')
- const paginationCls = classNames(
- 'swiper-pagination',
- {
- 'swiper-pagination-hidden': !indicatorDots,
- 'swiper-pagination-bullets': indicatorDots
- }
- )
-
- const hostStyle: Record<string, string> = {}
- const style: Record<string, string> = {}
+ const hostStyle: Record<string, string> = { overflow: 'hidden' }
+ const style: Record<string, string> = { overflow: 'visible' }
  if (this.full) {
  hostStyle.height = '100%'
  style.height = '100%'
  }
 
+ const [, previousMargin] = /^(\d+)px/.exec(this.previousMargin) || []
+ const [, nextMargin] = /^(\d+)px/.exec(this.nextMargin) || []
+ const pM = parseInt(previousMargin) || 0
+ const nM = parseInt(nextMargin) || 0
+ if (vertical) {
+ style.marginTop = `${pM}px`
+ style.marginBottom = `${nM}px`
+ } else {
+ style.marginRight = `${nM}px`
+ style.marginLeft = `${pM}px`
+ }
+
  return (
- <Host style={hostStyle}>
- <div class={cls} style={style}>
+ <Host class={`taro-swiper-${this._id}`} style={hostStyle}>
+ <div class='swiper-container' style={style}>
  <style type='text/css'>
  {`
- .taro-swiper-${this._id} .swiper-pagination-bullet { background: ${indicatorColor} }
- .taro-swiper-${this._id} .swiper-pagination-bullet-active { background: ${indicatorActiveColor} }
+ .taro-swiper-${this._id} > .swiper-container > .swiper-pagination > .swiper-pagination-bullet { background: ${indicatorColor} }
+ .taro-swiper-${this._id} > .swiper-container > .swiper-pagination > .swiper-pagination-bullet-active { background: ${indicatorActiveColor} }
  `}
  </style>
  <div class='swiper-wrapper'>
  <slot />
  </div>
- <div class={paginationCls} />
+ <div class={classNames('swiper-pagination',
+ {
+ 'swiper-pagination-hidden': !indicatorDots,
+ 'swiper-pagination-bullets': indicatorDots
+ }
+ )} />
  </div>
  </Host>
  )

packages/taro-components/types/components.d.ts

@@ -214,6 +214,10 @@ export namespace Components {
  */
  'interval': number;
  /**
+ * 后边距，可用于露出后一项的一小部分，接受 px 值
+ */
+ 'nextMargin': string;
+ /**
  * 前边距，可用于露出前一项的一小部分，接受 px 值
  */
  'previousMargin': string;
@@ -864,6 +868,10 @@ declare namespace LocalJSX {
  * 自动切换时间间隔
  */
  'interval'?: number;
+ /**
+ * 后边距，可用于露出后一项的一小部分，接受 px 值
+ */
+ 'nextMargin'?: string;
  'onAnimationfinish'?: (event: CustomEvent<any>) => void;
  'onChange'?: (event: CustomEvent<any>) => void;
  /**