Rumah > hujung hadapan web > tutorial js > vue插件实现移动端轮播图

vue插件实现移动端轮播图

php中世界最好的语言
Lepaskan: 2018-03-19 10:59:16
asal
4466 orang telah melayarinya

这次给大家带来vue插件实现移动端轮播图,vue插件实现移动端轮播图的注意事项有哪些,下面就是实战案例,一起来看一下。

果然基于Vue的插件还是很多的,于是就搜到了vue-awesome-swiper,是基于Vue和Swiper开发的轮播图插件,但是看API写出来的怎么总是报警告啊……还是自己研究研究吧……

本文只适用于Vue脚手架中的使用,CDN引入和使用参考文章最后API链接。

安装

npm

npm install vue-awesome-swiper --save
Salin selepas log masuk

引入

全局引入

入口文件main.js中进行引入

import VueAwesomeSwiper from 'vue-awesome-swiper' 
// require stylesimport 'swiper/dist/css/swiper.css'
 Vue.use(VueAwesomeSwiper, /* { default global options } */)
Salin selepas log masuk

局部引入

在需要用到轮播图的vue页面中引入

import 'swiper/dist/css/swiper.css'import { swiper, swiperSlide } from 'vue-awesome-swiper'
Salin selepas log masuk

并在components中添加swiper

components:{
    swiper,
    swiperSlide
  }
Salin selepas log masuk

使用

html结构

<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>
Salin selepas log masuk

data:

export default {
  data () {    return {
      swiperOption: {     
        autoplay:true,//自动切换
        pagination: {
          el: '.swiper-pagination'//分页器
        }
      },
      swiperSlides: [1, 2, 3]
    }
  }
}
Salin selepas log masuk

以上能实现基本的轮播图效果,其他效果参考Swiper官方API并在swiperOption中进行参数属性的设置即可。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

flex布局的使用

input复选框checkbox的样式修改

Atas ialah kandungan terperinci vue插件实现移动端轮播图. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan