当前课程知识点:软件开发实训--动态网站开发 >  14 网站前端组件实现 >  14.4滚动Vue组件实现 >  14.4.1滚动Vue组件实现

返回《软件开发实训--动态网站开发》慕课在线视频课程列表

14.4.1滚动Vue组件实现在线视频

下一节:14.5.1滚动接口实现

返回《软件开发实训--动态网站开发》慕课在线视频列表

14.4.1滚动Vue组件实现课程教案、知识点、字幕

同学你好

欢迎回到软件开发实训课堂

上节课咱们已经讲了

幻灯片组件的实现

那么这节课咱们来看一下

滚动区域该如何去实现

滚动区

我们说对于bootstrap

也可以通过它的相关组件来实现

但在这里咱们使用自定义的滚动内容来做它的模板

首先我们来定义模板

给他一个ID template

所有的模板必须要有一个根节点

所以我们先定一个根节点

然后再根节点下面

我们定一个标题

标题这里我们可以绑定一个属性

title

然后是滚动区域

滚动区域要求它的样式必须是位置

是相对或者绝对

这里用相对

因为相对的情况下

它默认是位置还在原来的位置

也就是它静态时的位置

这个是滚动区域

滚动区域

设置为相对布局

然后是滚动的内容

我们给他一个样式类

SCON

在滚动区域

我们可以绑定一个P标签

展示内容

content

加个S

而对于滚动

需要把它的位置设置为绝对位置

在CSS里边绝对的定位实际上也是相对的

也就是说这个绝对值是相对于上面DIV的

为什么呢

因为DIV它的位置是相对的

只有相对的负极或者是绝对的负极

在设置它的子类食材

可以用绝对值

这个要注意

也就是说如果想要标签成为绝对值的定位

那么必须要把它的负极设置为绝对的

或者是相对的

如果不这样设置的话

那么默认这个标签将相对于body标签绝对定位

这个要注意

所以说它的绝对实际上也是相对的

对于滚动的

这个区域也许是多个

所以我们需要有一个ID

把ID动态绑定上来

这样我们就可以表明ID它的唯一性

它这个区域的唯一性

我们再来实现组件

Vue.component

组件的名称我们就叫scroll

然后它的选项

在这里定义标签属性

第一个是ID

第二个是title

第三个

滚动的内容

然后关联模板

scrolltemplate

因为他要滚动

所以我们应该mounted在它挂载后就开始滚动

也就是把它放到界面上后就开始滚动

我们来计算它的滚动位置

首先获取负极节点的内容

这里边需要有一个ID

那么ID的滚动趋势scoll

所以我们先要获得

上面这个区域的内容

所以我们还得给这个区域加一个ID

这个ID可以是固定值

我们马上叫scollarea

我们先得到scollarea

这是他的负节点

然后我们得到负节点的高度

对于子节点它要不停的去改变它的位置

有了这个高度以后

我们需要把子节点

也就是我们的滚动区域放在高度的位置

所以我们要变换它的位置

这里边我们需要通过P来查找他

如果我们直接用点SCON的话

它会把整个界面的全部都给使用了

包括这个也是需要ID去获取

而不能直接这样获取

我们来改一下

如果ID有我们界面上有多个滚动的区域的话

我们需要用ID来判别它的位置

到底是哪一个区域的滚动

所以这里用this点ID

然后要加上一个井号

这样才能去找它

这样我们将这个区域就固定在我们当前的区域中

这样界面上有多个滚动区域是互不影响

找到这个标签

这是滚动的内容

我们把它的位置给它设一下

把他的Top设置为H

也就是说设置为负节点的高度

这样它就从最下边开始

然后要求往上滚动

所以我们可以这样去做

我们定义一个数据对象

在数据对象中

我们加一个tiner属性

因为我们要记录它的循环的执行的值

setinterval

它会执行一个函数方式

我们要求他每80毫秒执行一次

那这个函数干什么呢

实际上就是S在不断的变换

它的Top值一直

是减去

我们这里用current来代替他的当前值

current

Y减去个20

不用减这么大

每次减个二就行了

然后计算current

Y等于

减等于2

那么当它移动到顶部时

如果小于

小于多少呢

小于

我们S的高度

减去一个20

加上一个负值

也就是说我们把当前位置滚动的区域一直往上移动

移出它的高度区域

也就是让他看不见了

这个位置

看不见之后

我们再把current恢复到初始化的位置

这样让它不停的去循环

最后当销毁时

我们删除循环计时器

clearinterval

this.tiner把它销毁掉

这就是tiner的作用

我们来看一下我们scoll是否能够执行

为了使用它

我们进入到把它放在第三行线

第三行我们首先加列

class等于COL第三行

实际上我们的内容区域它一共是四列

所以我们这里边可以把COL给它设为三

它占三列

然后scoll

把我们的自定义的scoll给它放在这里来

标题我们可以从原站上复制一份

coming event

即将发生的事件

给它粘到这

最后滚动的内容

contents

这里可以绑定一下

contents

然后我们在下面去写这个contents

contents来定义我们具体的内容

简单的写一下

现在保存后我们刷新界面

可以看到我们的内容已经开始滚动了

但是它的区域不是我们期望的区域

我们来看一下

这个是滚动区

这是他的负节点

标题

还有左边的滚动区域

单元格

它已经超出了它的区域

要有一个隐藏效果

在这个负容器的style上添加一个

overflowhidden

如果说他超出了这个区域就隐藏它

这是一个

再一个把我们的滚动区可以与上面间隔一点距离

看不见了

为什么会看不见

因为我们的滚动区它没有内容了

那么里边这个内容为什么会看不见

是因为它是绝对未知

当他是绝对未知时

他并没有去撑开它的区域

所以我们要把负区域给它设定一个高度

这个高度我们可以通过外围的数据传递进来

在这里我们绑定一个style

我们不叫hid

也许我们绑定多个样式

所以我们这里边直接就叫做

pstyle

副容器样式

然后定义我们的属性

pstyle

同样的

在下面来提供滚动的区域

pstyle

我们以这种形式给它height

比如说我们的height是50

这里边可以带上参数

PX

然后保存

刷新界面

我们来看一下

在我们的属性上一定要加上pstyle

我们没有添加

刷新界面

这样呢它就能够实现在我们指定的区域内进行

滚动了

有关滚动组件的实现

我们就讲到这里

下节课我们再见

软件开发实训--动态网站开发课程列表:

1 前端需求分析

-1.1课程介绍

--1.1.1课程介绍

--1.1.2课程介绍PPT

--1.1.3随堂测试

-1.2网站需求分析

--1.2.2网站需求分析

--1.2.3需求PPT

--1.2.4随堂测试

-1.3网站首页分析

--1.3.1网站首页分析

--1.3.2首页分析PPT

--1.3.3随堂测试

-1.4导航菜单分析

--1.4.1导航菜单分析

--1.4.2课程PPT

--1.4.3随堂测试

-1.5内容区域分析

--1.5.1内容区域分析

--1.5.2课程PPT

--1.5.3随堂测试

-1.6内容副页面分析

--1.6.1副页面分析

--1.6.2课程PPT

--1.6.3软件系统需求分析

-1.7编写需求文档

-1.8需求分析理解

2 后端分析

-2.1后端页面总体分析

--2.1.1后端页面总体设计

--2.1.2课程PPT

--2.1.3随堂测试

-2.2用户管理功能设计

--2.2.1用户管理功能分析

--2.2.2课程PPT

--2.2.3随堂测试

-2.3内容与分类功能分析

--2.3.1内容与分类功能分析

--2.3.2课程PPT

--2.3.3随堂测试

-2.4网站配置功能设计

--2.4.1网站配置功能设计

--2.4.2课程PPT

--2.4.3软件系统设计

--2.4.4随堂测试

-2.5数据库及表结构分析

--2.5.1数据库及表结构分析

--2.5.2课程PPT

--2.5.3数据库设计

-总体设计文档

3 接口设计

-3.1前台模板约定

--3.1.1前台模板约定

--3.1.2课程PPT

--3.1.3随堂测试

-3.2网站配置接口设计

--3.2.1网站配置接口设计

--3.2.2课程PPT

--3.2.3随堂测试

-3.3菜单接口设计

--3.3.1菜单接口设计

--3.3.2课程PPT

--3.3.3随堂测试

-3.4内容接口设计

--3.4.1内容接口设计

--3.4.2课程PPT

--3.4.3随堂测试

-3.5幻灯片接口设计

--3.5.1幻灯片接口设计

--3.5.2课程PPT

--3.5.3随堂测试

-补充设计文档

-3.7接口设计

4 功能设计

-4.1用户管理功能设计

--4.1.1用户管理功能设计

--4.1.2课程PPT

--4.1.3随堂测试

-4.2菜单管理功能设计

--4.2.1菜单管理功能设计

--4.2.2课程PPT

--4.2.3随堂测试

-4.3内容管理功能设计

--4.3.1内容管理功能设计

--4.3.2课程PPT

--4.3.3随堂测试

-4.4网站配置信息设计

--4.4.1网站配置信息设计

--4.4.2课程PPT

--4.4.3随堂测试

-完成设计文档

-4.6随堂测试

5 环境搭建与开发

-5.1开发环境搭建

--5.1.1环境搭建

--5.1.2随堂测试

-5.2Web前端环境搭建

--5.2.1Web前端环境

-5.3创建用户实体

--5.3.1用户实体创建

--5.3.2随堂测试

-5.4用户实体表创建与初始化

--5.4.1用户实体表创建与初始化

--5.4.2随堂测试

-5.5用户数据访问接口实现

--5.5.1用户数据访问接口实现

--5.5.2随堂测试

-5.6环境搭建问题

-5.7环境搭建问题

6 用户管理功能实现

-6.1用户服务层接口实现

--6.1.1用户服务层接口实现

--6.1.2随堂测试

-6.2用户列表和编辑控制器实现

--6.2.1用户列表和编辑控制器实现

--6.2.2随堂测试

-6.3用户存储和删除控制器实现

--6.3.1用户存储和删除控制器实现

-6.4用户添加、编辑界面实现

--6.4.1用户添加、编辑界面实现

-6.5用户管理添加用户调试

--6.5.1用户管理添加用户调试

-6.6开发

7 用户管理功能实现二

-7.1用户查询模板实现

--7.1.1用户查询模板实现

--7.1.2随堂测试

-7.2用户信息编辑的实现

--7.2.1用户信息编辑的实现

-7.3单个用户删除实现

--7.3.2单个用户删除实现

-7.4多个用户删除实现

--7.4.1多个用户删除实现

8 用户管理功能实现三

-8.1用户列表分页基本实现

--8.1.1用户列表分页基本实现

-8.2用户列表查询结果分页实现

--8.2.1用户列表查询结果分页实现

-8.3通用日期处理

--8.3.1通用日期处理

-8.4整型日期处理

--8.4.1整型日期处理

--8.4.2随堂测试

-8.5枚举数据的应用

--8.5.1枚举数据的应用

--8.5.2Spring Boot开发

9 后台主界面实现

-9.1登录逻辑实现

--9.1.1登录逻辑实现

--9.1.2随堂测试

-9.2登录界面及流程调试

--9.2.1登录界面及流程调试

--9.2.2随堂测试

-9.3管理主界面实现

--9.3.1管理主界面实现

--9.3.2随堂测试

-9.4授权验证拦截器实现

--9.4.1授权验证拦截器实现

--9.4.2随堂测试

-9.5拦截器调试

--9.5.1拦截器调试

10 分类管理实现

-10.1分类接口实现

--10.1.1分类接口实现

-10.2分类添加、编辑实现

--10.2.1分类添加、编辑实现

-10.3分类树结构实现

--10.3.1分类树结构实现

-10.4分类删除实现

--10.4.1分类删除实现

--10.4.2随堂测试

11 内容管理实现

-11.1内容实体定义

--11.1.1内容实体定义

-11.2相关接口定义

--11.2.1相关接口定义

-11.3服务接口实现

--11.3.1服务接口实现

-11.4内容添加、编辑模板实现

--11.4.1内容添加、编辑模板实现

-11.5内容添加、编辑控制器实现

--11.5.1内容添加、编辑控制器实现

-11.6内容检索页面实现

--11.6.1内容检索页面实现

-11.7内容分类树实现

--11.7.1内容分类树实现

12 UEditor富文本编辑器

-12.1修改UEditor相关问题

--12.1.1修改UEditor相关问题

-12.2整合UEditor到内容编辑界面

--12.2.1整合UEditor到内容编辑界面

-12.3UEditor图片对话框应用

--12.3.1UEditor图片对话框应用

-12.4文件上传问题处理

--12.4.1文件上传问题处理

13 网站配置管理实现

-13.1网站配置相关类实现

--13.1.1网站配置相关类实现

-13.2网站配置界面模板实现

--13.2.1网站配置界面模板实现

-13.3网站配置调试

--13.3.1网站配置调试

14 网站前端组件实现

-14.1网站首页布局实现

--14.1.1网站首页布局实现

-14.2菜单Vue组件实现

--14.2.1菜单Vue组件实现

--14.2.2随堂测试

-14.3幻灯片Vue组件实现

--14.3.1幻灯片Vue组件实现

-14.4滚动Vue组件实现

--14.4.1滚动Vue组件实现

--14.4.2随堂测试

-14.5滚动接口实现

--14.5.1滚动接口实现

-14.6滚动接口调试

--14.6.1滚动接口调试

-14.7幻灯片接口实现

--14.7.1幻灯片接口实现

15 网站前端页面实现

-15.1首页区域实现

--15.1.1首页区域实现

-15.2首页内容脚本实现

--15.2.1首页内容脚本实现

-15.3首页完善

--15.3.1首页完善

-15.4Vue组件放入单文件

--15.4.1Vue组件放入单文件

-15.5详细页面实现

--15.5.1详细页面实现

-15.6前端问题

16 测试与发布

-16.1网站测试介绍

--16.1.1网站测试介绍

--16.1.2课程PPT

-16.2功能测试

--16.2.1功能测试

--16.2.2课程PPT

-16.3打包发布

--16.3.1打包发布

-16.4部署运行

--16.4.1部署运行

--16.4.2随堂测试

14.4.1滚动Vue组件实现笔记与讨论

也许你还感兴趣的课程:

© 柠檬大学-慕课导航 课程版权归原始院校所有,
本网站仅通过互联网进行慕课课程索引,不提供在线课程学习和视频,请同学们点击报名到课程提供网站进行学习。