展示组件

2024-07-13 02:15| 来源: 网络整理| 查看: 265

Swipe 轮播介绍引入代码演示基础用法图片懒加载监听 change 事件纵向滚动自定义滑块大小自定义指示器APISwipe PropsSwipe EventsSwipeItem EventsSwipe 方法swipeTo Options 格式Swipe Slots样式变量常见问题滑动轮播时为什么触发了 click 事件？在桌面端无法操作组件？Swipe 组件功能太少，无法实现复杂效果？组件从隐藏状态切换到显示状态时，无法正确渲染？解决方法Swipe 轮播介绍

用于循环播放一组图片或内容。

引入import Vue from 'vue';import { Swipe, SwipeItem } from 'vant';Vue.use(Swipe);Vue.use(SwipeItem);代码演示基础用法

每个 SwipeItem 代表一张轮播卡片，可以通过 autoplay 属性设置自动轮播的间隔。

1 2 3 4 .my-swipe .van-swipe-item { color: #fff; font-size: 20px; line-height: 150px; text-align: center; background-color: #39a9ed; }图片懒加载

当 Swipe 中含有图片时，可以配合 Lazyload 组件实现图片懒加载。

import Vue from 'vue';import { Lazyload } from 'vant';Vue.use(Lazyload);export default { data() { return { images: [ 'https://img01.yzcdn.cn/vant/apple-1.jpg', 'https://img01.yzcdn.cn/vant/apple-2.jpg', ], }; },};监听 change 事件 1 2 3 4import { Toast } from 'vant';export default { methods: { onChange(index) { Toast('当前 Swipe 索引：' + index); }, },};纵向滚动

设置 vertical 属性后滑块会纵向排列，此时需要指定滑块容器的高度。

1 2 3 4自定义滑块大小

滑块默认宽度为 100%，可以通过 width 属性设置单个滑块的宽度。纵向滚动模式下，可以通过 height 属性设置单个滑块的高度。

1 2 3 4

目前不支持在循环滚动模式下自定义滑块大小，因此需要将 loop 设置为 false。

自定义指示器

通过 indicator 插槽可以自定义指示器的样式。

1 2 3 4 {{ current + 1 }}/4 .custom-indicator { position: absolute; right: 5px; bottom: 5px; padding: 2px 5px; font-size: 12px; background: rgba(0, 0, 0, 0.1); }export default { data() { return { current: 0, }; }, methods: { onChange(index) { this.current = index; }, },};APISwipe Props参数说明类型默认值autoplay自动轮播间隔，单位为 msnumber | string-duration动画时长，单位为 msnumber | string500initial-swipe初始位置索引值number | string0width滑块宽度，单位为pxnumber | stringautoheight滑块高度，单位为pxnumber | stringautoloop是否开启循环播放booleantrueshow-indicators是否显示指示器booleantruevertical是否为纵向滚动booleanfalsetouchable是否可以通过手势滑动booleantruestop-propagation是否阻止滑动事件冒泡booleantruelazy-render v2.5.8是否延迟渲染未展示的轮播booleanfalseindicator-color指示器颜色string#1989fa Swipe Events事件名说明回调参数change每一页轮播结束后触发index, 当前页的索引 SwipeItem Events事件名说明回调参数click点击时触发event: Event Swipe 方法

通过 ref 可以获取到 Swipe 实例并调用实例方法，详见组件实例方法。

方法名说明参数返回值prev切换到上一轮播--next切换到下一轮播--swipeTo切换到指定位置index: number, options: Options-resize外层元素大小或组件显示状态变化时，可以调用此方法来触发重绘-- swipeTo Options 格式名称说明类型immediate是否跳过动画boolean Swipe Slots名称说明default轮播内容indicator自定义指示器样式变量

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考主题定制。

名称默认值描述@swipe-indicator-size6px-@swipe-indicator-margin@padding-sm-@swipe-indicator-active-opacity1-@swipe-indicator-inactive-opacity0.3-@swipe-indicator-active-background-color@blue-@swipe-indicator-inactive-background-color@border-color- 常见问题滑动轮播时为什么触发了 click 事件？

这种情况通常是由于项目中引入了fastclick库导致的。fastclick的原理是通过 Touch 事件模拟出 click 事件，而 Swipe 内部默认会阻止 touchmove 事件冒泡，干扰了 fastclick 的判断，导致出现这个问题。

将 Swipe 组件的 stop-propagation 属性设置为 false 即可避免该问题。

在桌面端无法操作组件？

参见桌面端适配。

Swipe 组件功能太少，无法实现复杂效果？

Vant 中的 Swipe 组件是比较轻量的，因此功能也比较基础。如果需要更复杂的轮播效果，推荐使用社区里一些优质的轮播库，比如 vue-awesome-swiper。

组件从隐藏状态切换到显示状态时，无法正确渲染？

Swipe 组件在挂载时，会获取自身的宽度，并计算出轮播图的位置。如果组件一开始处于隐藏状态，则获取到的宽度永远为 0，因此无法正确计算位置。

解决方法

方法一，如果是使用 v-show 来控制组件展示的，则替换为 v-if 即可解决此问题：

方法二，调用组件的 resize 方法来主动触发重绘：

this.$refs.swipe.resize();

【本文地址】

展示组件

展示组件

今日新闻

推荐新闻