移动应用开发——实验四

一、 实验目标：
1.掌握使用Vue-CLI脚手架工具在自己的电脑上建立项目，并会运行调试工具。
2.理解组件化开发思想。
3.图片轮播手机网页。

二、 实验内容：
1.要求使用Vue-CLI脚手架工具搭建一个Web项目vue-photo（本次实验必须用Vue-CLI脚手架搭建项目）。实验报告要求将项目文件结构截图，并简单介绍。
2.参照源码效果，实现一个图片轮播预览的手机网页。使用Vue组件编程方法完成主要功能，具体使用的编程技术不限。
3.功能上要求实现最基本的指定图片浏览功能。
4.自选扩展实验：模仿手机上的相机图片预览功能，实现手机内图片预览。本条内容根据自己的学习情况，可选做。

截图展示：

主要代码及实现方法简介：
Style.css

body {
  background-color: #9fe49f;
  padding: 50px;
}

.heading {
  text-align: center;
}
.heading h1 {
  background: -webkit-linear-gradient(#fff, #6a06f5);
  -webkit-text-fill-color: transparent;
  text-align: center;
  margin: 0 0 5px 0;
  font-weight: 900;
  font-size: 4rem;
  color: #fff;
}
.heading h4 {
  color: #cf283f;
  text-align: center;
  margin: 0 0 35px 0;
  font-weight: 400;
  font-size: 24px;
}

.container {
  margin-left: 30%;
  padding: 20px;
  background-color: rgb(167, 192, 209);
  border-radius: 8px;
  max-width: 800px;
  box-shadow: 0 5px 12px #0000007a;
}

.vueGallery .activePhoto {
  width: 100%;
  margin-bottom: 5px;
  padding-bottom: 65%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid rgb(228, 225, 225);
  position: relative;
}
.vueGallery .activePhoto button {
  border: none;
  background-color: transparent;
  font-size: 32px;
  color: #fff;
  opacity: 0.5;
  position: absolute;
  outline: none;
  height: 100%;
}
.vueGallery .activePhoto button:hover {
  opacity: 1;
}
.vueGallery .activePhoto button.previous {
  padding: 0 1em 0 0.7em;
  left: 0;
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80000000', endColorstr='#00000000',GradientType=1 );
}
.vueGallery .activePhoto button.next {
  padding: 0 0.7em 0 1em;
  right: 0;
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=1 );
}
.vueGallery .thumbnails {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  grid-gap: 5px;
}
.vueGallery .thumbnails div {
  width: 100%;
  border: 2px solid #fff;
  outline: 2px solid #fff;
  cursor: pointer;
  padding-bottom: 65%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
}
.vueGallery .thumbnails div:hover {
  opacity: 0.6;
}
.vueGallery .thumbnails div.active {
  outline-color: #5c4084;
  opacity: 1;
}

Vuegallery.vue

 <template>

    <div class="vueGallery">
    <div class="activePhoto" :style="'background-image: url('+photos[activePhoto]+')'">
      <button type="button" aria-label="Previous Photo" class="previous" @click="previousPhoto()">
        <i class="fas fa-chevron-circle-left"></i>
      </button>
      <button type="button" aria-label="Next Photo" class="next" @click="nextPhoto()">
        <i class="fas fa-chevron-circle-right"></i>
      </button>
    </div>

    <div class="thumbnails">
      <div
           v-for="(photo, index) in photos"
           :src="photo"
           :key="index"
           @click="changePhoto(index)"
           :class="{'active': activePhoto == index}" :style="'background-image: url('+photo+')'">
      </div>
    </div>
  </div>

</template>

<script>
export default {
  name:'VueGallery',
  props: {photos:{        //父组件向子组件传值,通过设置props属性 
      type :Array,
      default:()=>[]      
      /*
           default: function () {
                     return []
        }
      */
    }
  },
  data: function () {
    return {
      activePhoto: null
    }
  },
  mounted () {
    this.changePhoto(0)
    document.addEventListener("keydown", (event) => {
      if (event.which == 37)
        this.previousPhoto()
      if (event.which == 39)
        this.nextPhoto()
    })
  },
  methods: {
    changePhoto (index) {
      this.activePhoto = index
    },
    nextPhoto () {
      this.changePhoto( this.activePhoto+1 < this.photos.length ? this.activePhoto+1 : 0 )
    },
    previousPhoto () {
      this.changePhoto( this.activePhoto-1 >= 0 ? this.activePhoto-1 : this.photos.length-1 )
    }
  }
}
</script>

Photo.vue

<template>
<div class="container">
  <vue-gallery :photos="photos"></vue-gallery>  <!--绑定属性photos，这里简写-->
</div>
</template>

<script>

import VueGallery from '@/components/VueGallery.vue'

export default {
  name: 'Photo',
  components: {
    VueGallery
  },
  data: function () {  //
    return {
    photos: [
      require('../assets/img/xm1.jpg'),  //vue中background-image图片路径问题,动态路径，可以使用require()返回图片路径。
      require('../assets/img/xm2.jpg'),
      require('../assets/img/xm3.jpg'),
      require('../assets/img/xm4.jpg'),
      require('../assets/img/xm5.jpg'),
      require('../assets/img/xm6.jpg')
    ]
   }
  }

}
</script>

App.vue

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>|
      <router-link to="/photo"> Photo</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #80b9f1;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #0c4177;
}

#nav a.router-link-exact-active {
  color: #29e9f7;
}

</style>

三、 心得体会：
1、 进一步学习了使用vue_cli脚手架搭建web项目
2、 熟悉了vue使用开发
3、 实现了图片轮播预览，加强了代码能力
4、 学习了组件化开发