文档中心 > 小部件

swiper

更新时间:2023/03/13 访问次数:8312

说明:本文档适用于小部件3.0。

 

一、简介

 

轮播组件

滑块视图容器,其子节点可以放置view,默认为横向滚动;

支持手淘版本:>= 10.5.20

二、属性

 

属性

类型

描述

是否支持

将要支持

autoplay

Boolean

是否自动切换。

默认值: false。

/

current

Number

当前页面的 index,可以增加左右箭头来控制轮播滚动。

默认值: 0

/

duration

Number

滑动动画时长。

默认值: 500(ms)。

interval

Number

自动切换时间间隔。

默认值: 5000(ms)

/

circular

Boolean

是否启用无限滑动。

默认值: false。

是(文档没有透出)

/

vertical

Boolean

滑动方向是否为纵向。

默认值:false。

/

disable-programmatic-animation

Boolean

是否禁用swiper触发时使用动画

默认值:false。

disable-touch

Boolean

是否禁止用户 touch 操作。

默认值: false。

onChange

EventHandle

current 改变时会触发,event.detail = {current, isChanging},其中 isChangingacceleration 设置为 {{true}} 时才有值,当连续滑动多屏时,中间若干屏触发 onChange 事件时 isChangingtrue,最后一屏返回 false

/

onTransition

EventHandle

swiper 中 swiper-item 的位置发生改变时会触发 transition 事件。其中{dx,dy} = event.detail

开始支持。

indicator-dots

Boolean

是否显示指示点。

默认值: false。

否(开发者可以自己实现)

indicator-color

Color

指示点颜色。

默认值: rgba(0, 0, 0, .3)。

indicator-active-color

Color

当前选中的指示点颜色。

默认值:#000。

active-class

String

swiper-item 可见时的 class

changing-class

String

acceleration 设置为 {{true}} 时且处于滑动过程中,中间若干屏处于可见时的 class

previous-margin

String

前边距,单位 px,1.9.0 暂时只支持水平方向。

默认值: 0px。

说明: 去除 previous-margin 的设置距离可删除 swiper 组件左右空白距离。

next-margin

String

后边距,单位 px,1.9.0 暂时只支持水平方向。

默认值: 0px。

说明:去除 next-margin 的设置距离可删除 swiper 组件左右空白距离。

acceleration

Boolean

当开启时,会根据滑动速度,连续滑动多屏。

默认值: false。

onAnimationEnd

EventHandle

动画结束时会触发 animationEnd 事件,event.detail = {current, source},其中 source 的值有 autoplaytouch

swipe-ratio

Number

滑动距离阈值,当滑动距离超过阈值时进行 swiper-item 切换。

默认值:0.2。

swipe-speed

Number

滑动综合速度阈值,当超过阈值时进行 swiper-item 切换,数值越小越敏感。

默认值:0.05。

touch-angle

Number

计算用户手势时所依赖的滑动角度。角度根据 touchstart 事件和首次 touchmove 事件的坐标计算得出。数值越小越对用户的滑动方向准确度要求越高。

默认值:45。

display-multiple-items

Number

同时显示的滑块数量。

默认值:1。

easing-function

String

切换缓动动画类型。

默认值:default。

snap-to-edge

Boolean

当 swiper-item 个数大于等于 2,关闭 circular 并且开启 previous-margin 或 next-margin 时,可以指定这个边距是否应用到第一个、最后一个元素。

默认值:false。

adjust-height

String

自动以指定滑块的高度为整个容器的高度。当 vertical 为 true 时,默认不调整。可选值为:

first - 第一个滑块。

current - 实时的当前滑块。

highest - 高度最大的滑块。

none - 不根据滑块调整高度,容器高度取决于自身样式。

默认值:first。

adjust-vertical-height

Boolean

vertical 为 true 时强制使 adjust-height 生效。

默认值:false。

 

三、事件

onChange

 

类型: EventHandle

描述:current改变时触发

数据结构如下

1
2
3
4
5
<span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">{
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  <span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">detail</span>: {
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    <span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">current</span>:<span class="cm-number" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">0</span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  }
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">}</span></span>

 

四、子节点事件

1. onAppear

 

类型: EventHandle

描述:当前子节点即将出现在屏幕上时触发。

 

2. onDisappear

 

类型: EventHandle

描述:当前子节点即将消失在屏幕上时触发

 

五、示例

 

基本demo

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="cm-comment" style="color: #6a737d; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">/// test.axml</span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">view</span> <span class="cm-keyword" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">class</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"card-wrapper"</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">></span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  <span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">swiper</span> <span class="cm-keyword" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">class</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"swiper"</span> <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">interval</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"2000"</span> <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">circular</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"true"</span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">current</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"{{currentIndex}}"</span> <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">autoplay</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"true"</span> <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">onChange</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"swiperChange"</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">></span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    <span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">view</span> <span class="cm-keyword" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">class</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"item"</span> <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">a</span>:<span class="cm-keyword" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">for</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"{{itemList}}"</span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">   <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">onAppear</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"swiperItemAppear(item)"</span> <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">onDisappear</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"swiperItemDisappear(item)"</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">></span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">      <span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">image</span> <span class="cm-keyword" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">class</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"item"</span> <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">src</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"{{item.pic}}"</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">></span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><</span><span class="cm-string-2" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">/image></span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    <span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><</span><span class="cm-string-2" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">/view></span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  <span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><</span><span class="cm-string-2" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">/swiper></span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><</span><span class="cm-string-2" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">/view></span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="cm-comment" style="color: #6a737d; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">/// test.acss</span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">.<span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">card</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">-</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">wrapper</span> {
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">width</span>: <span class="cm-number" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">678</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">rpx</span>;
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">height</span>: <span class="cm-number" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">600</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">rpx</span>;
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">border</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">-</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">radius</span>: <span class="cm-number" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">3</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">vw</span>;
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">}
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">.<span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">swiper</span> {
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">width</span>: <span class="cm-number" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">600</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">rpx</span>;
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">height</span>: <span class="cm-number" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">400</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">rpx</span>;
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">border</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">-</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">width</span>: <span class="cm-number" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">2</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">rpx</span>;
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">border</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">-</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">color</span>: <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">cadetblue</span>;
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">border</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">-</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">style</span>: <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">solid</span>;
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">}
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">.<span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">item</span> {
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">width</span>: <span class="cm-number" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">600</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">rpx</span>;
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">height</span>: <span class="cm-number" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">400</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">rpx</span>;
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">}
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="cm-comment" style="color: #6a737d; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">/// test.js</span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">Component</span>({
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  <span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">data</span>: {
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    <span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">currentIndex</span>: <span class="cm-number" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">2</span>,
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    <span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">isAuto</span>: <span class="cm-atom" style="color: #990055; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">false</span>,
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    <span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">itemList</span>:[    
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    {<span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">index</span>:<span class="cm-number" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">0</span>, <span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">pic</span>:<span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'</span>},
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    {<span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">index</span>:<span class="cm-number" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">1</span>, <span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">pic</span>: <span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'</span>},
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    {<span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">index</span>:<span class="cm-number" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">2</span>, <span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">pic</span>:  <span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'</span>},              
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    {<span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">index</span>:<span class="cm-number" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">3</span>, <span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">pic</span>: <span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">'https://img.alicdn.com/bao/uploaded/i1/2961083067/O1CN018X8ZGz1YWjMpghnHD_!!2961083067.jpg'</span>},  
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">   ]
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  },
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  <span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">methods</span>: {
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    <span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">swiperChange</span>(<span class="cm-def" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">e</span>) {
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">     <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">console</span>.<span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">log</span>(<span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">'-------> change:'</span>, <span class="cm-variable-2" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">e</span>);
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    },
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    <span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">swiperItemAppear</span>(<span class="cm-def" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">e</span>) {
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">      <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">console</span>.<span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">log</span>(<span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">'-------> item-appear:'</span>, <span class="cm-variable-2" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">e</span>);
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    },
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    <span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">swiperItemDisappear</span>(<span class="cm-def" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">e</span>) {
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">      <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">console</span>.<span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">log</span>(<span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">'-------> item-disappear:'</span>, <span class="cm-variable-2" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">e</span>);
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    },
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  }
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">})</span></span>

 

六、FAQ

1. appear事件,disappear事件正确使用方式

 

目前如果对swiper组件的子节点绑定apppeardisappear事件,其回调函数中返回数据默认是该节点的渲染相关数据,包括refstylesattributes等等,目前无法根据ref确定数据源中对应项。因此,推荐使用以下方式来绑定回调函数

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="cm-comment" style="color: #6a737d; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">/// axml</span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">swiper</span> <span class="cm-keyword" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">class</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"swiper"</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">></span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"> <span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">view</span> <span class="cm-keyword" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">class</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"item"</span> <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">a</span>:<span class="cm-keyword" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">for</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"{{itemList}}"</span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">   <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">onAppear</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"swiperItemAppear(item)"</span> <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">onDisappear</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"swiperItemDisappear(item)"</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">></span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">   <span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><</span><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">image</span> <span class="cm-keyword" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">class</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"item"</span> <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">src</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">=</span><span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">"{{item.pic}}"</span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">></span><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><</span><span class="cm-string-2" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">/image></span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"> <span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><</span><span class="cm-string-2" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">/view></span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="cm-operator" style="color: #d73a49; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><</span><span class="cm-string-2" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">/swiper></span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="cm-comment" style="color: #6a737d; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">/// js</span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">data</span>: {
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"> <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">itemList</span>:[    
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">   {<span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">index</span>:<span class="cm-number" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">0</span>, <span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">pic</span>:<span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">'https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg'</span>},
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">   {<span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">index</span>:<span class="cm-number" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">1</span>, <span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">pic</span>: <span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">'https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg'</span>},
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">   {<span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">index</span>:<span class="cm-number" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">2</span>, <span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">pic</span>:  <span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">'https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg'</span>},              
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">   {<span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">index</span>:<span class="cm-number" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">3</span>, <span class="cm-property" style="color: #005cc5; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">pic</span>: <span class="cm-string" style="color: #669900; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">'https://img.alicdn.com/bao/uploaded/i1/2961083067/O1CN018X8ZGz1YWjMpghnHD_!!2961083067.jpg'</span>},  
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  ]
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">},
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">method</span>: {
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"> <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">swiperItemAppear</span>(<span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">e</span>) {
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    <span class="cm-comment" style="color: #6a737d; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">/// e为itemList中对应项数据</span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  },
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  <span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">swiperItemDisappear</span>(<span class="cm-variable" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">e</span>) {
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">    <span class="cm-comment" style="color: #6a737d; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">/// e为itemList中对应项数据</span>
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">  },
</span></span><span class="lake-preview-line" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);"><span class="lake-preview-codeblock-content" style="color: #595959; margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);">}</span></span>

 

2. Swiper组件子节点支持的组件

 

目前videocanvascamerainput组件不支持作为子节点在swiper组件中使用,后续版本会支持。

FAQ

关于此文档暂时还没有FAQ
返回
顶部