当前课程知识点：软件开发实训--动态网站开发 > 14 网站前端组件实现 > 14.3幻灯片Vue组件实现 > 14.3.1幻灯片Vue组件实现
同学你好
欢迎回到软件开发实训课堂
上节课咱们对菜单组件做了介绍
那么这节课咱们来看一下
幻灯片该如何实现
再参考网站
幻灯片比较简单
有几张图片来回的在切换
也没有导航
也没有指示
所以通过bootstrap来实现
就比较容易了
我们来看一下
先找到bootstrap的轮播
通过轮播我们来实现幻灯片效果
我们把这个模板给它复制过来
打开index.html文档
同样的添加一个script标签
带上ID
以便我们能够绑定模板
把我们复制的bootstrap的
html里的内容
复制到script的标签中间
首先我们绑定ID
注意ID属性前面有一个冒号
它的class不变
data-ride的属性值也不变
中间的容器
我们需要变化的
就是这个
carousel-item
它的项目进行变化
给它加class
循环
那么循环使用的数据
我们可以叫做sliders
它的索引
我们来判断idx
如果说等于0的话
我们就给它加一个active样式
否则的话就不要加
然后我们幻灯片的图片
alt
我们用它的标题就可以了
s.title
注意加冒号
src也要加冒号
src是图片的路径
那么它的
属性是timg
这样我们就需要
在循环的每一个项目中
至少包括一个图片和一个标题
剩下的我们就可以去掉了
然后我们来定义我们的模板
对应的组件
把它直接放在模板的下面
Vue
component
我们这里叫site-slide
直接用驼峰格式
选项
props
对应的属性
ID和slides
它的幻灯片数据
然后是模板
template
用ID来获取
数据我们可以不要
数据data这个属性我们可以先不要
因为我们的组件没有初始化数据
好 这样我们就可以去使用它
siteslide直接放在我们的
第二行幻灯片行
给它一个ID
给它绑定数据
slides
在我们的根组件上提供
slides这个数据
在根组件上添加我们的数据
菜单数组的后面添加slides
每一个对象都有一个
timg属性
同时
有一个title属性
这是幻灯片必须的值
当然了
如果你想要图片有超链接功能
你当然还得需要给其他的
因为我们参考网站没有提供超链接功能
所以我们不需要超链接
只需要图片和这个标题就可以了
我们可以暂时加五个
来做测试
这里所给出的数据都是测试数据
好 我们找五张图片来
好 我们取五张测试图片粘到这里
images
下面的1.jpg
2.jpg
3.jpg
把这五张图片给出来
它的标题可以空着
刷新我们的页面
看一下它是否进来了
在我们的第二行
slide已经给出来了相关的数据
这个是t注意拼写
site
不是side
再刷新
可以看到它的幻灯片效果已经实现了
但是有一点就是这个图片
特别大
好 我们让幻灯片与上面的
logo有一点距离
这样有距离以后显得更好看一些
通常我们要根据设计图来
指明我们的区域的
高度或者宽度
现在幻灯片的宽度我们是固定的
高度到底是多少
我们需要看一下它的高度
215
这样
我们把幻灯片的高度就可以给它设定为215
图片我们可以给它加一个属性
面积H让它的高度设定
这样我们在幻灯片的模板里就可以给出图片
它的高度了
我们直接用height的属性就可以
这样我们在使用时
imgh就给它一个
高度imgh等于215
所有的图片都将按照这个尺寸来显示
压扁了
这种效果出现
那么为了使得图片能够保持
完整与原始的
按比例进行缩放
最好在处理图片时
就把它按照原始的图片进行相关缩放
而不是这样直接压缩
好
有关幻灯片的实现
我们就讲到这里
下节课我们再见
-1.1课程介绍
--1.1.3随堂测试
-1.2网站需求分析
--1.2.4随堂测试
-1.3网站首页分析
--1.3.3随堂测试
-1.4导航菜单分析
--1.4.3随堂测试
-1.5内容区域分析
--1.5.3随堂测试
-1.6内容副页面分析
-1.7编写需求文档
-2.1后端页面总体分析
--2.1.3随堂测试
-2.2用户管理功能设计
--2.2.3随堂测试
-2.3内容与分类功能分析
--2.3.3随堂测试
-2.4网站配置功能设计
--2.4.4随堂测试
-2.5数据库及表结构分析
-总体设计文档
-3.1前台模板约定
--3.1.3随堂测试
-3.2网站配置接口设计
--3.2.3随堂测试
-3.3菜单接口设计
--3.3.3随堂测试
-3.4内容接口设计
--3.4.3随堂测试
-3.5幻灯片接口设计
--3.5.3随堂测试
-补充设计文档
-4.1用户管理功能设计
--4.1.3随堂测试
-4.2菜单管理功能设计
--4.2.3随堂测试
-4.3内容管理功能设计
--4.3.3随堂测试
-4.4网站配置信息设计
--4.4.3随堂测试
-完成设计文档
-4.6随堂测试
-5.1开发环境搭建
--5.1.2随堂测试
-5.2Web前端环境搭建
-5.3创建用户实体
--5.3.2随堂测试
-5.4用户实体表创建与初始化
--5.4.2随堂测试
-5.5用户数据访问接口实现
--5.5.2随堂测试
-5.6环境搭建问题
-6.1用户服务层接口实现
--6.1.2随堂测试
-6.2用户列表和编辑控制器实现
--6.2.2随堂测试
-6.3用户存储和删除控制器实现
-6.4用户添加、编辑界面实现
-6.5用户管理添加用户调试
-7.1用户查询模板实现
--7.1.2随堂测试
-7.2用户信息编辑的实现
-7.3单个用户删除实现
-7.4多个用户删除实现
-8.1用户列表分页基本实现
-8.2用户列表查询结果分页实现
-8.3通用日期处理
-8.4整型日期处理
--8.4.2随堂测试
-8.5枚举数据的应用
-9.1登录逻辑实现
--9.1.2随堂测试
-9.2登录界面及流程调试
--9.2.2随堂测试
-9.3管理主界面实现
--9.3.2随堂测试
-9.4授权验证拦截器实现
--9.4.2随堂测试
-9.5拦截器调试
-10.1分类接口实现
-10.2分类添加、编辑实现
-10.3分类树结构实现
-10.4分类删除实现
--10.4.2随堂测试
-11.1内容实体定义
-11.2相关接口定义
-11.3服务接口实现
-11.4内容添加、编辑模板实现
-11.5内容添加、编辑控制器实现
-11.6内容检索页面实现
-11.7内容分类树实现
-12.1修改UEditor相关问题
-12.2整合UEditor到内容编辑界面
-12.3UEditor图片对话框应用
-12.4文件上传问题处理
-13.1网站配置相关类实现
-13.2网站配置界面模板实现
-13.3网站配置调试
-14.1网站首页布局实现
-14.2菜单Vue组件实现
--14.2.2随堂测试
-14.3幻灯片Vue组件实现
-14.4滚动Vue组件实现
--14.4.2随堂测试
-14.5滚动接口实现
-14.6滚动接口调试
-14.7幻灯片接口实现
-15.1首页区域实现
-15.2首页内容脚本实现
-15.3首页完善
-15.4Vue组件放入单文件
-15.5详细页面实现
-16.1网站测试介绍
-16.2功能测试
-16.3打包发布
-16.4部署运行
--16.4.2随堂测试
