vue移动端轻量级的轮播组件实现代码

一个简单的移动端卡片滑动轮播组件，适用于Vue2.x

c-swipe 2.0 全新归来。重写了全部的代码，更靠谱的质量，更优秀的性能

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"
style="text-align: center; line-height: 80px; height: 100px; background: #42b983;"
>
<swipe-item style="height: 100px; line-height: 100px">item1</swipe-item>
<swipe-item style="height: 100px; line-height: 100px">item2</swipe-item>
<swipe-item style="height: 100px; line-height: 100px">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
},
// ...
// ...
});

配置

方法

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移动端轻量级的轮播组件实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

• 利用Vue实现移动端图片轮播组件的方法实例
• 基于vue实现swipe轮播组件实例代码
• 基于vue.js轮播组件vue-awesome-swiper实现轮播图
• VUE开发一个图片轮播的组件示例代码