美文网首页
vue-swipe轮播图的安装使用

vue-swipe轮播图的安装使用

作者: 哒哒哒哒da | 来源:发表于2019-04-02 17:52 被阅读0次

1.安装轮播图依赖

npm i vue-swipe

2.在main.js中导入模块,注册全局

require('vue-swipe/dist/vue-swipe.css');
import { Swipe, SwipeItem } from 'vue-swipe';

Vue.component('swipe', Swipe);
Vue.component('swipe-item', SwipeItem);

3.在需要的vue文件中引用,例子如下:

<swipe class="my-swipe">
  <swipe-item class="slide1"></swipe-item>
  <swipe-item class="slide2"></swipe-item>
  <swipe-item class="slide3"></swipe-item>
</swipe>
.my-swipe {
  height: 200px;
  color: #fff;
  font-size: 30px;
  text-align: center;
}
 
.slide1 {
  background-color: #0089dc;
  color: #fff;
}
 
.slide2 {
  background-color: #ffd705;
  color: #000;
}
 
.slide3 {
  background-color: #ff2d4b;
  color: #fff;
}

推荐一个好用的网站(npm官网): https://www.npmjs.com/
你所有想要下载的vue依赖包都可以从这里找命令.
我一般都是在vue项目中需要使用js原生插件的时候,先来这里看看有没有依赖包可以下载,有命令当然就说明是可以简单化的使用.官网有介绍使用方法.

相关文章

  • vue-swipe轮播图

    一、安装饿了么团队开发的vue专用的轮播图插件:vue-swipenpm install vue-swipe 二、...

  • vue-swipe轮播图的安装使用

    1.安装轮播图依赖 2.在main.js中导入模块,注册全局 3.在需要的vue文件中引用,例子如下: 推荐一个好...

  • 3种常用轮播图

    3种轮播图的简单使用 Banner轮播图的使用 1、使用的依赖 compile...

  • vue swiper插件使用

    vue-awesome-swiper的使用 1、安装 2、在vue中引入 3、进入轮播图组件中

  • vue-awesome-swiper的使用

    vue-awesome-swiper的使用 1、安装 2、在vue中引入 3、进入轮播图组件中

  • 无限循环轮播图

    无限循环轮播图 在工作的过程中,很多情况下会遇到要使用轮播图,相信大家也遇到过,使用轮播图的话分两种情况:不能无限...

  • 单向轮播图的简单实现

    说到轮播图,估计都不陌生,各种各样的轮播图在各个App上都不断的被使用,因为轮播图的界面简洁并且内容涵盖丰富,所以...

  • 轮播图实现

    轮播图在实际应用开发使用较多,本文说明一下具体的实现过程。 一、实现轮播图的基本控件介绍。实现轮播图需要将多张图片...

  • h5页面中有定时器的时候,轮播图不滚动

    (1)轮播图 react-slick 的使用,但是页面中有其他定时器的时候,轮播图不滚动npm install ...

  • React轮播-----react-bootstrap

    React项目 使用轮播图 React-bootstrap中的轮播(Carousel)模块参考github: ht...

网友评论

      本文标题:vue-swipe轮播图的安装使用

      本文链接:https://www.haomeiwen.com/subject/datnbqtx.html