vue移動端輕量級的輪播組件實現(xiàn)代碼

更新時間：2018年07月12日 14:38:37 投稿：mrr

這篇文章主要介紹了vue移動端輕量級的輪播組件實現(xiàn)代碼，一個簡單的移動端卡片滑動輪播組件，適用于Vue2.x。本文給大家?guī)砹藢嵗a，需要的朋友參考下吧

一個簡單的移動端卡片滑動輪播組件，適用于Vue2.x

c-swipe 2.0 全新歸來。重寫了全部的代碼，更靠譜的質(zhì)量，更優(yōu)秀的性能

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 標(biāo)簽中直接引用

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

配置

選項	類型	默認(rèn)	描述
v-model	Number	0	綁定了當(dāng)前顯示卡片的索引，該數(shù)據(jù)為雙向綁定，可通過更改 v-model 的值直接更改當(dāng)前顯示卡片
pagination	Boolean	true	是否需要默認(rèn)樣式的導(dǎo)航器
loop	Boolean	true	循環(huán)切換
autoplayTime	Number	0	單位 ms，自動切換卡片的時間間隔，值為 0 時不自動切換
speed	Number	300	單位 ms, 切換卡片時的過渡效果的播放時長
minMoveDistance	String	'20%'	成功觸發(fā)切換卡片事件的最小滑動距離，可以傳入百分比，如 '20%'，或者傳入具體像素距離，如 '80px'。

方法

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>

總結(jié)

以上所述是小編給大家介紹的vue移動端輕量級的輪播組件實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: