欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用vue-awesome-swiper实现幻灯片组件开发

程序员文章站 2022-09-03 23:47:18
vue的swiper组件 https://www.npmjs.com/package/vue-awesome-swiper 1、安装 swiper 和 vue-awesome-swiper 插件 cnpm install swiper vue-awesome-swiper --save (截图里只安 ......

vue的swiper组件 

 

1、安装 swiper 和 vue-awesome-swiper 插件

cnpm install swiper vue-awesome-swiper --save

(截图里只安装了vue-awesome-swiper,后面我又安装了swiper,大家自己补充下)

使用vue-awesome-swiper实现幻灯片组件开发

 

 

 

 

2、在 components目录下,创建slider目录,导入图片素材,创建index.vue

<template>
  <swiper ref="myswiper" :options="swiperoptions">
    <swiper-slide v-for="(slider,index) in sliders" :key="index">
        <a :href="slider.linkurl">
            <img :src="slider.imgurl">
        </a>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>

<script>
import { swiper, swiperslide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css';
 
export default {
    name:"slider",
    title: 'autoplay',
    components:{
        swiper,
        swiperslide
    },
    data() {
      return {
        sliders:[
            {
                index:0,
                linkurl:'www.baidu.com',
                imgurl:require('./1.jpg')
            },{
                index:0,
                linkurl:'www.baidu.com',
                imgurl:require('./2.jpg')
            },{
                index:0,
                linkurl:'www.baidu.com',
                imgurl:require('./3.jpg')
            },{
                index:0,
                linkurl:'www.baidu.com',
                imgurl:require('./4.jpg')
            }
        ],
        swiperoptions: {
          spacebetween: 30,
          centeredslides: true,
          autoplay: {
            delay: 2500,
            disableoninteraction: false
          },
          loop: true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          },
          navigation: {
            nextel: '.swiper-button-next',
            prevel: '.swiper-button-prev'
          }
        }
      }
    },
    computed: {
      swiper() {
        return this.$refs.myswiper.$swiper;
      }
    },
    mounted() {
      console.log('current swiper instance object', this.swiper);
      this.swiper.slideto(3, 1000, false);
    }
  }
</script>

<style lang="scss" scoped>
    .swiper-container{
        width:100%;
        height:180px;
    }
    .swiper-slide a{
        display:block;
        width:100%;
        height:100%;

        & img{
            width:100%;
            height:100%;
        }
    }
</style>

 

3、创建pages/home/index.vue,引入slider组件

<template>
    <div class="home">
        <slider/>
    </div>

</template>

<script>
import slider from 'components/slider';

export default {
    name:"home",
    components:{
        slider
    }
}
</script>

 

4、添加路由 src/router/index.js

import vue from 'vue'
import router from 'vue-router'
import home from 'pages/home'

vue.use(router)

export default new router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    }
  ]
})

 

效果图

使用vue-awesome-swiper实现幻灯片组件开发

 

需要注意的是:

如果在 dom 结构中的某个 dom 节点使用了 v-if、v-show 或者 v-for(即根据获取到的后台数据来动态操作 dom,即响应式),那么这些 dom 是不会在 mounted 阶段找到的。

mounted 阶段,一般是用于发起后端请求,获取数据,配合路由钩子做一些事情。简单来说就是在 mounted 钩子中加载数据而已,加载回来的数据是不会在这个阶段更新到 dom 中的。所以在 mounted 钩子中使用 $refs,如果 ref 是定位在有 v-if、v-for、v-show 的 dom 节点中,返回来的只能是 undefined,因为在 mounted 阶段他们根本不存在。

如果说 mounted 阶段是加载阶段,那么 updated 阶段则是完成了数据更新到 dom 的阶段(对加载回来的数据进行处理),此时,再使用 this.$refs.xx,就 100% 能找到该 dom 节点。

updated 与 mounted 不同的是,在每一次的 dom 结构更新,vue.js 都会调用一次 updated 钩子函数!而 mounted 钩子函数仅仅只执行一次而已。

 

因此修改mouted为updated如下:

使用vue-awesome-swiper实现幻灯片组件开发