一個簡單的移動端卡片滑動輪播組件，適用于Vue2.x
c-swipe 2.0 全新歸來。重寫了全部的代碼，更靠譜的質量，更優秀的性能
安裝
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 }, // ... // ...});配置
| 選項 | 類型 | 默認 | 描述 |
|---|---|---|---|
| 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移動端輕量級的輪播組件實現代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
