版权声明:本文首发 http://asing1elife.com ,转载请注明出处。 https://blog.csdn.net/asing1elife/article/details/83144210
Mint-UI 提供一个 Swipe 组件用于实现轮播,但官方文档实在过于简陋,此处通过翻阅源码查找到以下实用方法
更多精彩
- 更多技术博客,请移步 asing1elife’s blog
官方文档
禁止自动滚动
- 控制自动滚动的参数是
auto
,默认值 3000 毫秒 - 在 API 文档中没有说明如何禁止自动滚动,但是在示例代码中有说明将
:auto="0"
即可禁止自动滚动
<mt-swipe :auto="0">
<mt-swipe-item>...</mt-swipe-item>
</mt-swipe>
手动切换上 / 下一个
- API 文档中没有任何关于操作组件的方法,但在源码中可以翻阅到如下代码
next() {
this.doAnimate('next')
},
prev() {
this.doAnimate('prev')
},
- 所以可以通过为组件添加
ref
,并调用以上方法来实现上下子项的切换
<mt-swipe ref="testSwipe"></mt-swipe>
// 手动切换到下一个
this.$refs.testSwipe.next()
// 手动切换到上一个
this.$refs.testSwipe.prev()