今天就跟大家聊聊有关使用vue怎么实现一个移动端轻量级轮播组件，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
English Document
安装
npm install c-swipe --save
使用
注册组件
计算
安全
数据库
网络和加速
企业服务
// main.js
// 引入 c-swipe 主文件
import 'c-swipe/dist/swipe.css';
import { Swipe, SwipeItem } from 'c-swipe';
// 全局注册组件
Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);在 .vue 单文件组件中使用:
<swipe
v-model="index"
>
<swipe-item >item1</swipe-item>
<swipe-item >item2</swipe-item>
<swipe-item >item3</swipe-item>
</swipe>
new Vue({
data: function () {
return {
index: 0, // two way
};
},
});或者，你想在 html 标签中直接引用
<link href="../node-modules/c-swipe/dist/swipe.css" rel="external nofollow" rel="stylesheet"></head>
<script type="text/javascript" src="../node-modules/c-swipe/dist/swipe.js"></script>
var vueSwipe = swipe.Swipe;
var vueSwipeItem = swipe.SwipeItem;
new Vue({
el: 'body',
// 注册组件
components: {
'swipe': vueSwipe,
'swipe-item': vueSwipeItem
},
// ...
// ...
});配置
| 选项 | 类型 | 默认 | 描述 |
|---|---|---|---|
| v-model | Number | 0 | 绑定了当前显示卡片的索引，该数据为双向绑定，可通过更改 v-model 的值直接更改当前显示卡片 |
| pagination | Boolean | true | 是否需要默认样式的导航器 |
| loop | Boolean | true | 循环切换 |
| autoplayTime | Number | 0 | 单位 ms，自动切换卡片的时间间隔，值为 0 时不自动切换 |
| speed | Number | 300 | 单位 ms, 切换卡片时的过渡效果的播放时长 |
| minMoveDistance | String | '20%' | 成功触发切换卡片事件的最小滑动距离，可以传入百分比，如 '20%'，或者传入具体像素距离，如 '80px'。 |
方法
swipe.reset()
c-swipe 内部将重新计算 Swipe 的宽度，并根据新的宽度来计算滚屏的距离。这个可以解决容器重置大小后 c-swipe 滚屏距离不正确的问题。
例：
<swipe ref="swipe">
<swipe-item>item1</swipe-item>
<swipe-item>item2</swipe-item>
<swipe-item>item3</swipe-item>
</swipe>
<script>
export default {
// ...
// ...
handleResize() {
this.$refs.swipe.reset();
}
mounted() {
// 避免上下文丢失
this.handleResize = this.handleResize.bind(this);
window.addEventListener('resize', this.handleResize);
},
destroyed() {
window.removeEventListener('resize', this.handleResize);
}
// ...
// ...
}
</script>看完上述内容，你们对使用vue怎么实现一个移动端轻量级轮播组件有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
亿速云「轻量应用服务器」，开箱即用、面向轻量应用场景，一站式融合常用基础云服务与热门开源软件，一键构建应用，上手更加简单便捷，价格只需23元/月！点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
