移动应用开发—

一、实验目标：
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"><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:{        //父组件向子组件传值,通过设置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、学习了组件化开发

移动应用开发——实验四相关推荐

互联网软件开发—— 实验四 JavaBean 应用（简易购物车）
实验名称:实验四 JavaBean 应用一.实验目的: 掌握在 JSP 页面中创建和使用 JavaBean 对象: 掌握通过 session 共享 JavaBean 对象: 掌握将集合类型数据以表格 ...
2017-2018-2 20165236 实验四《Android开发基础》实验报告
2017-2018-2 20165236 实验四<Android开发基础>实验报告一.实验报告封面课程:Java程序设计班级:1652班姓名:郭金涛 ...
20155202 实验四 Android开发基础
20155202 实验四 Android开发基础实验内容 1.基于Android Studio开发简单的Android应用并部署测试; 2.了解Android.组件.布局管理器的使用: 3．掌握An ...
2018-2019-2-20175225 实验四《Android开发基础》实验报告
一.实验报告封面课程:Java程序设计班级:1752班姓名:张元瑞学号:20175225 指导教师:娄嘉鹏实验日期:2019年5月14日实验时间:13:45 - 21:00 实验序号:实验 ...
实验四android开发基础
实验四android开发基础提交点一 Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(EPUBIT,Java for Android 2nd) ...
实验四：Android 开发基础
实验四:实验报告课程:程序设计与数据结构班级: 1623 姓名: 张旭升学号:20162329 指导教师:娄嘉鹏王志强实验日期:5月26日实验密级: 非密级预习程度: 已预习必修/选修 ...
20175208 张家华实验四《Android开发基础》实验报告
一.实验报告封面课程:Java程序设计班级:1752班姓名:张家华学号:20175208 指导教师:娄嘉鹏实验日期:2019年5月16日实验时 ...
以太坊智能合约开发（四）：Solidity转账智能合约实验
以太坊智能合约开发(四):Solidity转账智能合约实验 1 合约编写 2 在线调试 1 合约编写编写一个分布式转账智能合约,部署合约的人为合约管理员,只有管理员可以为其他用户发放代币,其他用户之 ...
20175308 2018-2019-2 实验四《Android开发基础》实验报告
20175308 2018-2019-2 实验四 <Android开发基础>实验报告实验要求参考 Android开发简易教程完成云班课中的检查点,也可以先完成实验报告,直接提交.注意 ...

移动应用开发——实验四

移动应用开发——实验四相关推荐

最新文章

热门文章