【WEB前端全栈成长计划】第三阶段 考核开发实录(四)
【摘要】 下面我们来完成首页剩下的最后一个内容,就是banner图。这里的banner图,我们使用swiper来实现一下。 首先,停止项目服务ctrl+c就可以哈,然后在项目目录下,运行命令: npm install vue-awesome-swiper@3 --save-dev 然后我们在homeTop.vue里这样使用:<template> <div>...
下面我们来完成首页剩下的最后一个内容,就是banner图。这里的banner图,我们使用swiper来实现一下。
首先,停止项目服务ctrl+c就可以哈,然后在项目目录下,运行命令:
npm install vue-awesome-swiper@3 --save-dev
然后我们在homeTop.vue里这样使用:
<template> <div> <div class="recommendPage header"> <swiper :options="swiperOption" ref="mySwiper"> <swiper-slide> <img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.24.002/banner-2.64b1407e7a8db89d6cf2.jpg" alt=""> </swiper-slide> <swiper-slide> <img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.24.002/banner-4.4ac0f6534a11844638e4.jpg" alt=""> </swiper-slide> <swiper-slide> <img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.24.002/banner-10.30eaaf519fa37bf97d36.jpg" alt=""> </swiper-slide> <swiper-slide> <img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.24.002/banner-8.d14241daf518717981c6.jpg" alt=""> </swiper-slide> <div slot="pagination"></div> </swiper> </div> <div> <p> Classroom是基于华为云的云上软件教学服务,支持高校师生实现备课、上课、作业、考试、实验、实训等全教学流程的线上教学,提供多类习题自动判题、企业级DevOps实训、免费在线习题库等众多高级特性辅助进行数字化教学转型。 </p> <a href=""> <p>开始上课</p> </a> </div> </div> </template> <script> // 引入插件 import { swiper, swiperSlide } from "vue-awesome-swiper"; import "swiper/dist/css/swiper.css"; export default { components: { swiper, swiperSlide }, data() { return { swiperOption: { loop: true, autoplay: { delay: 3000, stopOnLastSlide: false, disableOnInteraction: false }, // 显示分页 pagination: { el: ".swiper-pagination", clickable: true //允许分页点击跳转 } } }; }, computed: { swiper() { return this.$refs.mySwiper.swiper; } }, mounted() { // current swiper instance // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了 console.log("this is current swiper instance object", this.swiper); // this.swiper.slideTo(3, 1000, false); } }; </script> <style> .header { width: 100%; min-height: 360px; margin-top: 60px; } .header img { width: 100%; height: auto; } .intro { display: flex; flex-wrap: nowrap; padding: 30px; position: relative; top: -50px; z-index: 2; width: 1200px; background: #fff; box-shadow: 0 0 20px 0 rgba(41, 48, 64, .1); border-radius: 5px; align-items: center; margin: 0 auto; } .intro .banner-left { flex: 1; padding-right: 40px; font-size: 16px; color: #5e6678; line-height: 32px; } .intro a p { color: #fff; height: 32px; line-height: 32px; border-radius: 16px; margin-right: 12px; padding: 0px 20px; min-width: 80px; font-size: 14px; cursor: pointer; text-align: center; } .recommendPage .swiper-container{ position: relative; width: 100%; min-height: 360px; } .recommendPage .swiper-container .swiper-slide{ width: 100%; color: #000; font-size: 16px; text-align: center; } .recommendPage .swiper-container img{ width: 100%; height: 100%; } .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{ bottom:60px; } </style>
现在就可以看到banner的效果了,根据我们的需求简单调整下样式:
【WEB前端全栈成长计划】第三阶段考核首页的部分,我们已经完成了,swiper是一个轮播框架,我就直接用了,有看不懂的同学可以自己搜搜swiper的文档看看哈~下一篇文章,我们来简单说下MOOC课程页面组件的开发。
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)