Home > Article > Web Front-end > vue plug-in implements carousel chart on mobile terminal
This time I will bring you the vue plug-in to implement the mobile carousel chart. What are the precautions for the vue plug-in to implement the mobile carousel chart. The following is a practical case, let's take a look.
Sure enough, there are still a lot of plug-ins based on Vue, so I searched for vue-awesome-swiper, which is a carousel chart plug-in developed based on Vue and Swiper, but when I look at the API written, I always get a warning... ...or do your own research...
This article only applies to use in Vue scaffolding. CDN introduction and use refer to the last API link of the article.
Installation
npm
npm install vue-awesome-swiper --save
Introduction
Global introduction
Introduce in entry filemain.js
import VueAwesomeSwiper from 'vue-awesome-swiper' // require stylesimport 'swiper/dist/css/swiper.css' Vue.use(VueAwesomeSwiper, /* { default global options } */)
Local introduction
In the vue page that needs to use the carousel image Introduce
import 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } from 'vue-awesome-swiper'
and add swiper
components:{ swiper, swiperSlide }
in components using
html structure
<swiper :options="swiperOption"> <swiper-slide v-for="slide in swiperSlides" :key="slide.id">I'm Slide {{ slide }}</swiper-slide> <p class="swiper-pagination" slot="pagination"></p></swiper>
data:
export default { data () { return { swiperOption: { autoplay:true,//自动切换 pagination: { el: '.swiper-pagination'//分页器 } }, swiperSlides: [1, 2, 3] } } }
The above can achieve the basic carousel effect. For other effects, refer to Swiper official API and parameterize in swiperOption Attribute can be set.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Input checkbox checkbox style modification
The above is the detailed content of vue plug-in implements carousel chart on mobile terminal. For more information, please follow other related articles on the PHP Chinese website!