使用Vue制作幻灯片

一、数据准备

在页面中的幻灯片一般都会作为一个组件，由父组件将幻灯片组件需要的数据传入，数据slides如下：

slides: [
            {
              src: require('../assets/slideShow/pic1.jpg'),
              title: 'xxx1',
              href: 'detail/analysis'
            },
            {
              src: require('../assets/slideShow/pic2.jpg'),
              title: 'xxx2',
              href: 'detail/count'
            },
            {
              src: require('../assets/slideShow/pic3.jpg'),
              title: 'xxx3',
              href: 'http://xxx.xxx.com'
            },
            {
              src: require('../assets/slideShow/pic4.jpg'),
              title: 'xxx4',
              href: 'detail/forecast'
            }
],

二、幻灯片的点击切换功能

组件内部需要一个data，nowIndex为当前正在显示的幻灯片的index，也是slides数组的下标。

data() {
    return {
        nowIndex: 0
    }
}

页面的html为

<div class="slide-show">
    <div class="slide-img">
        <a :href="slide[nowIndex].href">
            <img :src="slides[nowIndex].src">
        </a>
    </div>