vue实例之组件开发：图片轮播组件

一、普通方式：

其中，index是关键。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
html, body{
    margin: 0;
    padding: 0;
}
.photo-player{
    width: 456px;
    height: 670px;
    overflow: hidden;
    position: relative;
}
.photo-player-lists{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 456px;
    height: 670px;
}
.photo-player-lists li{
    list-style-type: none;
    width: 456px;
    height: 670px;
}
.photo-player-lists li img{
    width: 456px;
    height: 670px;
}
.photo-player-button{
    position: absolute;
    margin: 0;
    padding: 0;
    bottom: 30px;
    left: 198px;
    list-style-type: none;
}
.photo-player-button li{
    list-style-type: none;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 6px;
    float: left;
    cursor: pointer;
}
.white{
    background: #ffffff;
}
.active{
    background: #0000ff;
}
</style>
<title>Title</title>

</head>
<body>
<div id="app">
    <my-player :photos="photos"></my-player>
    <my-player :photos="photos"></my-player>
    <my-player :photos="photos"></my-player>
</div>

<script src="libs/vue.js"></script>
<script>
Vue.component("my-player", {
    template: `<div class="photo-player">
            <ul class="photo-player-lists">
                <li v-for="(value, key) in photos" v-if="key==index"><img :src="value" /></li>
            </ul>

            <ul class="photo-player-button">
                <li v-for="(value, key) in photos" :class="['white', {'active': key == index}]" @click="index = key"></li>
            </ul>
        </div>`,
    props: ["photos"],
    data: function(){
        return {
            index: 0
        }
    },
    methods: {
        change(){
            let that = this;
            let len = this.photos.length;
            setInterval(function(){
                that.index++;
                if(that.index == len){
                    that.index = 0;
                }

            }, 1000*3);
        }
    },
    mounted(){
        this.change();
    }
});

let app = new Vue({
    el: "#app",
    data: {
        photos: ["images/08.jpg", "images/13.jpg", "images/16.jpg"]
    }
});
</script>
</body>
</html>

二、单文件组件形式：

PhotoPlayer.vue：

<template>
    <div class="photo-player">
            <ul class="photo-player-lists">
                <li v-for="(value, key) in photos" v-if="key==index" :key="key"><img :src="value" /></li>
            </ul>

            <ul class="photo-player-button">
                <li v-for="(value, key) in photos" :class="['white', {'active': key == index}]" @click="index = key" :key="key"></li>
            </ul>
    </div>
</template>

<script>
export default {
    data(){
        return {
            index: 0
        }
    },
    props: ["photos"],
    methods: {
        change(){
            let that = this;
            let len = this.photos.length;
            setInterval(function(){
                that.index++;
                if(that.index == len){
                    that.index = 0;
                }

            }, 1000*5);
        }
    },
    mounted(){
        this.change();
    }
}
</script>

<style scoped>
html, body{
    margin: 0;
    padding: 0;
}
.photo-player{
    width: 456px;
    height: 670px;
    overflow: hidden;
    position: relative;
}
.photo-player-lists{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 456px;
    height: 670px;
}
.photo-player-lists li{
    list-style-type: none;
    width: 456px;
    height: 670px;
}
.photo-player-lists li img{
    width: 456px;
    height: 670px;
}
.photo-player-button{
    position: absolute;
    margin: 0;
    padding: 0;
    bottom: 30px;
    left: 198px;
    list-style-type: none;
}
.photo-player-button li{
    list-style-type: none;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 6px;
    float: left;
    cursor: pointer;
}
.white{
    background: #ffffff;
}
.active{
    background: #0000ff;
}
</style>

使用时：

在某个单文件组件中引用PhotoPlayer.vue

<template>
  <div>
    <PhotoPlayer :photos="photos"></PhotoPlayer>
  </div>
</template>

<script>
import PhotoPlayer from './PhotoPlayer'
export default {
  data() {
    return {
      photos: [require("../assets/08.jpg"), require("../assets/13.jpg"), require("../assets/16.jpg")]
    }
  },
  components: {
    PhotoPlayer
  }
};
</script>

<style scoped=""></style>

注意：

定义了一个数组，数组里面装有图片的路径，使用for循环渲染页面时，图片路径对但是图片不显示。

解决办法：

数组里面图片的路径要写成如下：

image:require('../assets/login.png')

渲染的时候要写：

<img :src="item.image" />