• vue-swipe的使用


    原文地址:https://segmentfault.com/a/1190000013909870

    【新手向】要在页面上要做一个轮播图用swiper的话大概有110KB,功能很强大。然而我只想用个轮播的简单效果,不需要加特效。通过搜索,发现有一个饿了么前端出品的轮播swipe,刚好满足我的需求,而且只有11KB左右足够精简。废话不多说,开整...

    1、安装

    $ npm install vue-swipe

    2、在main.js中添加

    import Vue from 'vue'
    import App from './App'
    import routes from './router/router-config'
    import { Swipe, SwipeItem } from 'vue-swipe'  // 加这里
    
    Vue.component('swipe', Swipe)  // 加这里
    Vue.component('swipe-item', SwipeItem) // 加这里
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      components: { App },
      template: '<App/>'
    })

    3、在页面xxxx.vue中引用css样式
    【注意:不要加scoped,会污染样式,导航的小圆点就不显示了】

    <style>
    @import 'vue-swipe/dist/vue-swipe.css';
    .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;
    }
    </style>

    4、在页面xxxx.vue中你需要的位置上写代码

    <swipe class="my-swipe">
        <swipe-item class="slide1">1</swipe-item>
        <swipe-item class="slide2">2</swipe-item>
        <swipe-item class="slide3">3</swipe-item>
    </swipe>

    5、效果

    clipboard.png

    好了,就这样。

  • 相关阅读:
    后期生成事件命令copy /y
    SevenZipShaper压缩类
    vs2017
    WCF路由服务
    微服务--
    各种流程图的绘画网路工具 processon
    ROC 准确率,召回率 F-measure理解(转载)
    Unix OpenCV安装
    转载:tar 解压缩命令~
    cppreference经验总结
  • 原文地址:https://www.cnblogs.com/beimingbingpo/p/9540603.html
Copyright © 2020-2023  润新知