移动应用开发——实验四_赴约如期

网络 02-07 596

一、实验目标： 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>  </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、学习了组件化开发