• vue-awesome-swiper 的安装和使用


    vue-awesome-swiper 的安装和使用

    安装:最好用:cnpm install vue-awesome-swiper --save。用npm太慢会卡死。

    引用:

     /*全局引入*/
        import VueAwesomeSwiper from 'vue-awesome-swiper'
        import 'swiper/dist/css/swiper.css'//这里注意具体看使用的版本是否需要引入样式,以及具体位置。
        Vue.use(VueAwesomeSwiper, /* { default global options } */)
      /*组件方式引用*/
        import 'swiper/dist/css/swiper.css'////这里注意具体看使用的版本是否需要引入样式,以及具体位置。
        import { swiper, swiperSlide } from 'vue-awesome-swiper'
        export default {
        components: {
          swiper,
          swiperSlide
        }
     <swiper :options="swiperOption">
          <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
          <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
          <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
          <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
          <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
          <swiper-slide><img src="static/images/jay.jpg"></swiper-slide>
        </swiper>
        <!--以下看需要添加-->
        <div class="swiper-scrollbar"></div> //滚动条
        <div class="swiper-button-next"></div> //下一项
        <div class="swiper-button-prev"></div> //上一项
        <div class="swiper-pagination"></div> //标页码
     data() {
        return {
          swiperOption: {
            notNextTick: true,
            autoplay: true,
            speed: 1000,
            loop: true
          },
        };
      },
     components: {   //
        swiper,
        swiperSlide
      },

    我个人自己使用的方法:

    0.1、使用的是yarn 的方式安装插件:

    0.2、在需要使用的组件中引入

    0.3、结构设置,

     0.4、配置项设置1

    0.5、配置项设置2

    1、路在何方? 路在脚下 2、何去何从? 每个人都在探索,未来的方向在何处。如果说某些方向是世人已经公认的,那么就先按照公认的去走吧(ps:站在巨人的肩膀上看世界会清晰)。 如果说方向,当今世人还不清晰准确。那么就大胆往前走吧,对与错并不重要。心中的方向更加重要。
  • 相关阅读:
    奶牛编号(Cowids) [NOIP模拟]
    天天爱跑步 [NOIP2016]
    部落冲突
    狡猾的商人 [HNOI2005] [一题双解]
    最长公共子序列-LCS问题 (LCS与LIS在特殊条件下的转换) [洛谷1439]
    LeetCode 2. Add Two Numbers
    LeetCode 1. Two Sum
    LeetCode 91. Decode Ways
    LeetCode 516. Longest Palindromic Subsequence
    什么是马拉车算法(Manacher's Algorithm)?
  • 原文地址:https://www.cnblogs.com/yuanjili666/p/11510579.html
Copyright © 2020-2023  润新知