使用vue怎么實現(xiàn)一個移動端輕量級輪播組件

今天就跟大家聊聊有關(guān)使用vue怎么實現(xiàn)一個移動端輕量級輪播組件，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

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

配置

方法

swipe.reset()

c-swipe 內(nèi)部將重新計算 Swipe 的寬度，并根據(jù)新的寬度來計算滾屏的距離。這個可以解決容器重置大小后 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>

看完上述內(nèi)容，你們對使用vue怎么實現(xiàn)一個移動端輕量級輪播組件有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。