• vue awaresome swiper的使用


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


    组件

    <template>
      <div id="container">
        <swiper :options="swiperOption" ref="mySwiper">
    
          <swiper-slide v-for="(item,index) in swipes">
            <img :src="item.picUrl" >
          </swiper-slide>
      <p class="swiper-pagination" slot="pagination"></p>
      </swiper>
      </div>
    </template>
    <script>
      import { swiper, swiperSlide } from 'vue-awesome-swiper'
      export default {
        name: 'carrousel',
        props:["swipes"],
        data () {
          return {
            swiperOption: {
              autoplay : {
                disableOnInteraction: false, //用户操作后是否禁止自动循环
                delay: 3000 //自自动循环时间
              }, //可选选项,自动滑动
              speed: 1500, //切换速度,即slider自动滑动开始到结束的时间(单位ms)
              loop:true, //循环切换
              grabCursor: true, //设置为true时,鼠标覆盖Swiper时指针会变成手掌形状,拖动时指针会变成抓手形状
              // setWrapperSize: true, //Swiper使用flexbox布局(display: flex),开启这个设定会在Wrapper上添加等于slides相加的宽或高,在对flexbox布局的支持不是很好的浏览器中可能需要用到。
              autoHeight: true,   //自动高度。设置为true时,wrapper和container会随着当前slide的高度而发生变化。
              scrollbar: '.swiper-scrollbar',
              mousewheelControl: true, //设置为true时,能使用鼠标滚轮控制slide滑动
              observeParents: true, //当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper
              pagination: {
                el: '.swiper-pagination',
                // type : 'progressbar', //分页器形状
                clickable :true, //点击分页器的指示点分页器会控制Swiper切换
              },
    
            },
            computed: {
              swiper() {
                return this.$refs.mySwiper.swiper
              }
            }
          }
        }
      }
    </script>
    <style scoped>
      .swiper-slide{
        100%;
        height:150px;
      }
      img {
         100%;
        height: auto;
      }
    </style>
  • 相关阅读:
    js变量如何赋值给css使用?
    前端预览与下载PDF小结
    子组件如何改父组件传过来的值
    TensorRT转换时的静态模式与动态模式
    Linux:搭建GlusterFS文件系统
    OpenFeign传输文件MultipartFile
    Docker:commit、export、import、save、load命令的使用
    Git:代码版本回退
    docker安装Drools Workbench
    ArchLinux:Typora设置gitee图床
  • 原文地址:https://www.cnblogs.com/lwj820876312/p/9156601.html
Copyright © 2020-2023  润新知