anchor iview 悬浮_iView3.x Anchor(锚点)组件 导航锚点
iView3.x Anchor(锚点)组件 导航锚点
iview 3.x框架中新添了一个Anchor(锚点组件),用这个组件去做页面的分类导航正好合适,但是苦于官方文档太过抽象研究了一整天,才勉强可以在项目中应用。下面是我研究后的一点总结:
首先在main.js中引入iview 3.x
我使用部分引用组件的方法所以要单独引入Anchor组件
import {Anchor} from 'iview'
Vue.component('Anchor', Anchor) // 这两句就可以在页面中使用组件了
接着在要使用锚点的页面中引入组件
注意:在页面中这里引用的是AnchorLink
原因是在页面中Anchor 被渲染成了多层嵌套的div 只有AnchorLink是以组件形式存在于渲染后的页面中所以真正的组件是AnchorLink
但是main.js文件中引入还是要引入Anchor...
就这一点小坑硬是把我卡住了好久,最后在层层的Elements中终于发现了问题的所在。
import {AnchorLink} from 'iview'
components: {
AnchorLink
}
html中锚点列表部分的代码
Anchor标签中container属性表示的是可以滚动的区域节点,表示方法与CSS相同"."表示class,"#"表示id
affix属性是图钉效果,根据自己想表现的效果选择是否使用;show-ink是锚点前的小圆点都是按需选择的属性.
<Anchor show-ink :affix="false" container=".goodShow">
<AnchorLink href="#basic_usage" title="Basic Usage" />
<AnchorLink href="#static_position" title="Static Position" />
</Anchor>
代码中href的值是该锚点跳转位置的ID title是该锚点的名称
锚点对应的滚动区代码
滚动区中div的id对应的是锚点部分的href
<div class="goodShow">
<div id="basic_usage" style="height:30rem;">12312312312</div>
<div id="static_position" style="height:30rem;">123123123123</div>
</div>
CSS代码部分
.goodShow{position: relative;overflow-y: scroll;}
注意:必须要把滚动区设计成带滚动条的部分不然完成不了滚动效果。
也就是说无论滚动区和锚点列表在html中的顺序是如何,但是一定要把Anchor标签中container对应的文档节点,设置为滚动区的节点。
例如:
<div class="goodShow"> // 滚动区域
<Anchor show-ink :affix="false" container=".goodShow"> // 锚点列表
<AnchorLink href="#basic_usage" title="Basic Usage" />
<AnchorLink href="#static_position" title="Static Position" />
</Anchor>
<div id="basic_usage" style="height:30rem;">12312312312</div> // 锚点列表中对应的文档位置
<div id="static_position" style="height:30rem;">123123123123</div>
</div>
补充说明: 如果页面中的数据是通过v-for循环渲染的,则有可能出现'offset undefined一类的报错',出现这种报错的大概率会影响页面的滚动效果,产生的原因是:锚点列表的数据与滚动的页面的展示数据是分开获取的,由于时间差的原因会导致其中一个渲染完成之后另一部分并没有被渲染.也就会造成组件在获取offset时找不到(也就是undefined),报错并导致失去原有的页面效果.
解决办法:设法使两部分数据同一时间赋值给渲染的变量,比如分两个接口获取锚点的分类和内容,在create中调用接口获取数据,但不要再两个接口中分别赋值.统一到一个接口数据获取完成后再赋值,这样就可以避免这种报错.
最后,纪念一下这忙碌的一天。。
END
anchor iview 悬浮_iView3.x Anchor(锚点)组件 导航锚点相关推荐
- anchor iview 悬浮_iView Loader
iView Loader 用途 统一 iView 标签书写规范,所有标签都可以使用首字母大写的形式,包括 Vue 限制的两个标签 Switch 和 Circle. 虽然不推荐,但通过 loader 选 ...
- 学会使用ant design封装一个锚点组件
我是歌谣 放弃很容易 但是坚持一定很酷 封装一个锚点组件就是要知道一个父子组件的一个传值 很显然 父亲这边传过去一个数组 然后就可以进行循环遍历得到一个新的数值 这边注意 当我们进行一个map返回值得 ...
- html命名锚id name,Html5 锚 的页内跳转, name=abc herf=#abc | 易学教程
锚点是网页制作中超级链接的一种,又叫命名锚记.命名锚记像一个迅速定位器一样是一种页面内的超级链接,运用相当普遍. 英文名:anchor 使用命名锚记可以在文档中设置标记,这些标记通常放在文档的特定主题 ...
- router锚点和html锚点,hash模式下Vue-router页面返回锚点(scroll behavior)实现
在普通页面中,点击浏览器的返回按钮,在返回到上一页时会处在上次浏览的位置.单页面应用中,由于始终是同一个页面, 因此需要自行实现页面返回时的锚点.Vue-router的Scroll Behavior可 ...
- mui组件 a 锚点定位(Demo案例演示)- 代码篇
文章目录 `从踩坑,入坑,到跳出坑`:mui框架(在mui-scroll中如何进行页内锚点跳转) `那么,用什么方法实现锚点跳转?` `思路就是:` - 我们可以使用另外一种MUI组件,即:`(顶部选 ...
- html 锚文本,什么是锚文本,锚文本链接对SEO的影响!
SEO是一个细节决定成败的工作,如果你想要试图改善排名,每一名SEO人员在做优化的时候,都绕不开锚文本这个话题,如果你选择正确的锚文本,它会使你事半功倍,反之则是事倍功半. 那么,什么是锚文本,锚文本 ...
- html5锚点平滑,使用锚点定位不改变url同时平滑的滑动到锚点位置,不会生硬的直接到锚点位置...
使用锚点定位不改变url同时平滑的滑动到锚点位置,不会生硬的直接到锚点位置 对前端来说锚点是一个很好用的技术,它能快速定位到预先埋好的位置. 但是美中不足的是它会改变请求地址url,当用户使用了锚点的 ...
- iview ui table表格里嵌入其它组件
iview ui table表格里嵌入其他组件的方式 <Tableborder:columns="columnsBox":data="pointList" ...
- iview@2.13.0/1版本,Table组件IE9不兼容的问题
iview@2.13.0/1版本,Table组件IE9不兼容的问题 问题描述: IE9下出现错误: 查找原因: 查看iview github上源码:是因为remove方法不兼容IE9引起的 if(th ...
最新文章
- 爬虫基础(一)之概念、作用、分类和流程
- linux定时任务crontab
- Nginx的Gzip和sendfile的共存问题
- Windows下用命令行导出导入MySQL数据库
- 【Oracle】锁表查询与解锁
- 【债券】可转换债券基本概念
- 页面滚动效果库,有点儿皮!
- 深入理解springboot starter
- /plus/recommend.php sql注入漏洞,DedeCMS 全版本通杀SQL注入漏洞利用代码及工具 -
- Mip-NeRF:抗混叠的多尺度神经辐射场ICCV2021
- java笔记框架部分
- .net Response导出excel表格边框设置日期时间设置
- 成信大809软件工程专业基础历年真题及答案
- android实现一键锁屏
- 本地虚拟机搭建k8s集群完整篇
- 史上最简单MySQL教程详解(进阶篇)之视图
- 家族关系查询系统程序设计算法思路_数据结构课程设计--
- 十六、基于FPGA的CRC校验设计实现
- linux虚拟地址空间管理,Linux内存管理4---虚拟地址空间管理
- 关于 “<”运算符是为将来使用而保留的。 的解决办法