一、 實(shí)驗(yàn)?zāi)繕?biāo)：
1.掌握使用Vue-CLI腳手架工具在自己的電腦上建立項(xiàng)目，并會(huì)運(yùn)行調(diào)試工具。
2.理解組件化開(kāi)發(fā)思想。
3.圖片輪播手機(jī)網(wǎng)頁(yè)。

二、 實(shí)驗(yàn)內(nèi)容：
1.要求使用Vue-CLI腳手架工具搭建一個(gè)Web項(xiàng)目vue-photo（本次實(shí)驗(yàn)必須用Vue-CLI腳手架搭建項(xiàng)目）。實(shí)驗(yàn)報(bào)告要求將項(xiàng)目文件結(jié)構(gòu)截圖，并簡(jiǎn)單介紹。
2.參照源碼效果，實(shí)現(xiàn)一個(gè)圖片輪播預(yù)覽的手機(jī)網(wǎng)頁(yè)。使用Vue組件編程方法完成主要功能，具體使用的編程技術(shù)不限。
3.功能上要求實(shí)現(xiàn)最基本的指定圖片瀏覽功能。
4.自選擴(kuò)展實(shí)驗(yàn)：模仿手機(jī)上的相機(jī)圖片預(yù)覽功能，實(shí)現(xiàn)手機(jī)內(nèi)圖片預(yù)覽。本條內(nèi)容根據(jù)自己的學(xué)習(xí)情況，可選做。

截圖展示：

主要代碼及實(shí)現(xiàn)方法簡(jiǎn)介：
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"><divv-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:{ //父組件向子組件傳值,通過(guò)設(shè)置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，這里簡(jiǎn)寫--> </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圖片路徑問(wèn)題,動(dòng)態(tài)路徑，可以使用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>

三、 心得體會(huì)：
1、 進(jìn)一步學(xué)習(xí)了使用vue_cli腳手架搭建web項(xiàng)目
2、 熟悉了vue使用開(kāi)發(fā)
3、 實(shí)現(xiàn)了圖片輪播預(yù)覽，加強(qiáng)了代碼能力
4、 學(xué)習(xí)了組件化開(kāi)發(fā)

總結(jié)

以上是生活随笔為你收集整理的移动应用开发——实验四的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。