【VueSlickCarousel平铺走马灯】

老六.。。

已于 2022-11-14 17:48:01 修改

阅读量685

点赞数 1

文章标签： vue.js javascript 前端

于 2022-11-14 17:46:06 首次发布

原文链接：https://blog.csdn.net/qq_52031916?type=blog

版权

<template>

<VueSlickCarousel v-bind="settings">

<img v-for="icon in imgList" :src="realSrc(icon.coverImg)" @click="goArticleList(icon.link)"class="img-method"/>

</VueSlickCarousel>

</template>

<script>

import VueSlickCarousel from 'vue-slick-carousel'  //引进组件
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

export default {

  name: 'index',

  components: { VueSlickCarousel },

  data(){

    return{

      title:'专题专栏',

      imgList:[

        //这里的图片不能为空（用于占位）

      {url: require('@/assets/images/Special-method.png')},

      {url: require('@/assets/images/Special-country.jpg')},

      {url: require('@/assets/images/Special-mountain.jpg')},

      {url: require('@/assets/images/Special-mountain.jpg')},

      {url: require('@/assets/images/Special-mountain.jpg')},

      {url: require('@/assets/images/Special-mountain.jpg')},

    ],

      settings:{

       focusOnSelect: false,  //焦点选择

       infinite: true,

       speed: 500,           //速度

       autoplaySpeed: 4000,  //翻页速度

       slidesToShow: 4,    //幻灯片到显示

       slidesToScroll: 1,  //幻灯片到卷轴

       touchThreshold: 1,  //触摸阈值

       arrows: false,

       autoplay: true,

     }

    }

  },

 created() {

    this.getList();

  },

  methods: {

    /** 查询官网菜单列表 */

    getList() {

      listTzSpecial(this.queryParams).then(response => {

        this.imgList = response.rows;        //查询出数据存入数组

      });

    },

  }

}

</script>