如上圖所示，實現里面的數據滾動效果，這里我們使用了 swiper

具體代碼如下，可以直接使用喔~~~

<template><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide">silide 1</div><div class="swiper-slide">silide 2</div><div class="swiper-slide">silide 3</div><div class="swiper-slide">silide 4</div><div class="swiper-slide">silide 5</div><div class="swiper-slide">silide 6</div></div><!-- 如果需要分頁器 --><div class="swiper-pagination"></div><!-- 如果需要導航按鈕 --><div class="swiper-button-prev"></div><div class="swiper-button-next"></div><!-- 如果需要滾動條 --><div class="swiper-scrollbar"></div></div></template><script>import Swiper from 'swiper'import Vue from 'vue'export default {name: 'ReportTitle',data () {return {}},mounted () {this.initSwiper();},methods: {initSwiper () {new Swiper('.swiper-container', {loop: true,// 如果需要分頁器pagination: '.swiper-pagination',// 如果需要前進后退按鈕nextButton: '.swiper-button-next',prevButton: '.swiper-button-prev',// 如果需要滾動條scrollbar: '.swiper-scrollbar',})}}}</script><style lang="less" scoped>@import "../../../../../../node_modules/swiper/dist/css/swiper.css";.swiper-container {width: 58px;height: 30px;color: #fff;}.swiper-container::-webkit-scrollbar {width: 0;height: 0;color: transparent;display: none;}</style>

總結

以上是生活随笔為你收集整理的vue项目中使用swiper的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。