「Vue — 插件」轮播图vue-awesome-swiper

昔不亏 等级 368 0 0

1:安装 cnpm install vue-awesome-swiper@3 --save-dev cnpm install swiper@3 2:在main.js中

import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

3:在需要使用的页面中

<template>
  <div id="video-list">
    <swiper :options="swiperOption">
        <!-- 幻灯内容 -->
        <swiper-slide>slide1</swiper-slide>    
        <swiper-slide>slide2</swiper-slide> 
        <swiper-slide>slide1</swiper-slide>    
        <swiper-slide>slide2</swiper-slide> 
    </swiper>
  </div>
</template>
<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'    //导入组件
    export default{
        name:'videoList',
        components: {
            swiper, //定义组件
            swiperSlide
        },
        data(){
            return {
                swiperOption: {
                    direction:"vertical",
                    grabCursor: true, 
                    setWrapperSize: true, 
                    autoHeight: true, //自动高度。设置为true时,wrapper和container会随着当前slide的高度而发生变化
                    slidesPerView: 1,
                    mousewheel: true, 
                    mousewheelControl: true, 
                    height: window.innerHeight, // 高度设置,占满设备高度
                    resistanceRatio: 0, 
                    observeParents: true, 
                }
            }
        },
     }
</script>
<style scoped>
    #video-list{height: 100%;}
    #video-list .swiper-container{
        height: 100%;
    }
</style>
收藏
评论区

相关推荐

vue-toy: 200行代码模拟Vue实现
vuetoy 200行左右代码模拟vue实现,视图渲染部分使用React来代替Sanbbdom,欢迎Star。 项目地址:https://github.com/bplok20010/vuetoy(https://github.com/bplok20010/vuetoy) codesandbox示例(https://codes
基于Vue的图片浏览v-viewer
第一步,安装 npm i vviewer S 第二步,main.js引用 import Viewer from 'vviewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, 'butto
vue实现世界疫情地图(点击进入子地图)
点击进入子地图目前只实现了中国模块 数据来源,腾讯实时疫情(https://news.qq.com/zt2020/page/feiyan.htm/global),中国疫情网(https://www.ncovchina.com/data.html) 原本只想做中国模块,后来想了想,做个世界的吧 使用axios和echarts,elementui的
前端面试题自检 Vue 网络 浏览器 性能优化部分
框架Vue MVVM是什么?ModelViewViewModel , Model 表示数据模型层。view 表示视图层, ViewModel 是 View 和 Model 层的桥梁,数据绑定到 viewModel 层并自动渲染到页面中,视图变化通知 viewModel 层更新数据。 Vue 的生命周期
Vue的学习笔记(上篇)
一、什么是Vue.js?Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。 二、什么是vmodel指令?vmode
「Vue — 插件」轮播图vue-awesome-swiper
1:安装cnpm install vueawesomeswiper@3 savedevcnpm install swiper@32:在main.js中 jsimport VueAwesomeSwiper from 'vueawesomeswiper'import 'swiper/dist/css/swiper.css'Vue.use(Vu
「Vue — 插件」轮播图vue-awesome-swiper
1:安装cnpm install vueawesomeswiper@3 savedevcnpm install swiper@32:在main.js中 jsimport VueAwesomeSwiper from 'vueawesomeswiper'import 'swiper/dist/css/swiper.css'Vue.use(Vu
介绍 | Vue3中文文档
已经了解 Vue 2,只想了解 Vue 3 的新功能可以参阅 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与以及各种 结合使用时
Vue和微信小程序的区别
_写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别。_一、生命周期先贴两张图: vue生命周期 小程序生命周期相比之下,小程序的钩子函数要简单得多。vue的钩子函数在跳转新页面时,钩子函数都会触发,但是小程序的钩子函数,页面不同的跳转方式,触发的钩子并不一样。 onLoad
Vue的学习笔记(中篇)
一、什么是Vue.js?Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。上篇文章我们讲述了基础,可以戳这里:。这篇文章我
Vue的学习笔记(下篇)
一、什么是Vue.js?Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。前面几天我们已经分享了和,今天我们一起来看看下篇。 二
最新最全的 Vue 面试题 ➕详解答案
前言本文整理了高频出现的 Vue 相关面试题并且附带详解答案 难度分为简单 中等 困难 三种类型 大家可以先不看答案自测一下自己的 Vue 水平哈 整理不易 如果觉得本文有帮助 记得点赞三连哦 十分感谢! 简单 1 MVC 和 MVVM 区别 MVCMVC 全名是 Model View Controller,是模型(model)-视图(view)-控制器
手把手教你实现一个图片压缩工具(Vue与Node的完美配合)
前言图片压缩对于我们日常生活来讲,是非常实用的一项功能。有时我们会在在线图片压缩网站上进行压缩,有时会在电脑下软件进行压缩。那么我们能不能用前端的知识来自己实现一个图片压缩工具呢?答案是有的。效果展示原图片大小:82KB压缩后的图片大小:17KB测试是不是特别good!!!看到上面的压缩后的图片,可能你还会质疑图片的清晰度,那么看下面(第一张图为压缩后的图片
Vue.js的图片加载性能优化你可以试试
前言图片加载优化对于一个网站性能好坏起着至关重要的作用。所以我们使用Vue来操作一波。备注以下的优化一、优化二栏目都是我自己封装在Vue的工具函数里,所以请认真看完,要不然直接复制的话,容易出错的。资源 Vue.js Element UI 优化一:图片加载动画只有当图片加载完成后才可以显示图片,加载动画结束。我们使用Element UI
Vue 3.0 有哪些新特性值得我们提前了解
一、迎接 Vue 3.0 1\. 简介在这里插入图片描述Vue.js 作者兼核心开发者尤雨溪宣布 Vue 3.0 进入 Beta 阶段。 已合并所有计划内的 RFC 已实现所有被合并的 RFC Vue CLI 现在通过 vueclipluginvuenext 提供了实验性支持 2\. 新特性重点关注: 更快更省