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

// 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);

<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
  };
 },
});

<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 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>