当前课程知识点：软件开发实训--动态网站开发 > 14 网站前端组件实现 > 14.4滚动Vue组件实现 > 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.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随堂测试
