iView3.x Anchor(锚点)组件导航锚点

wuaiqiu 发布于2019-08-23 12:20 / 1559人阅读

摘要：锚点组件导航锚点框架中新添了一个锚点组件，用这个组件去做页面的分类导航正好合适，但是苦于官方文档太过抽象研究了一整天，才勉强可以在项目中应用。

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是锚点前的小圆点都是按需选择的属性.

代码中href的值是该锚点跳转位置的ID title是该锚点的名称

锚点对应的滚动区代码

滚动区中div的id对应的是锚点部分的href


  12312312312
  123123123123

CSS代码部分

.goodShow{position: relative;overflow-y: scroll;}

注意：必须要把滚动区设计成带滚动条的部分不然完成不了滚动效果。
也就是说无论滚动区和锚点列表在html中的顺序是如何，但是一定要把Anchor标签中container对应的文档节点，设置为滚动区的节点。
例如：

  // 滚动区域

   // 锚点列表
   
   
  

  12312312312 // 锚点列表中对应的文档位置
  123123123123

补充说明: 如果页面中的数据是通过v-for循环渲染的,则有可能出现"offset undefined一类的报错",出现这种报错的大概率会影响页面的滚动效果,产生的原因是:锚点列表的数据与滚动的页面的展示数据是分开获取的,由于时间差的原因会导致其中一个渲染完成之后另一部分并没有被渲染.也就会造成组件在获取offset时找不到(也就是undefined),报错并导致失去原有的页面效果.
解决办法:设法使两部分数据同一时间赋值给渲染的变量,比如分两个接口获取锚点的分类和内容,在create中调用接口获取数据,但不要再两个接口中分别赋值.统一到一个接口数据获取完成后再赋值,这样就可以避免这种报错.

最后，纪念一下这忙碌的一天。。

END

GPU云服务器云服务器内锚点锚点锚点数目锚点跳转

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98336.html

怎样给一个Vue页面添加大纲导航

摘要：这里用到一个非常重要的函数，它会根据调用的根节点遍历该节点的子树，返回符合某个选择器的一个类数组的对象，但不是数组，而且遍历方式就是上文所述的深度优先先序遍历真是激动人心接下来我们可以用这个元素获取所有需要导航的元素列表。一、前言前两天项目遇到一个需要给页面添加大纲导航的功能，要求把页面中的特定标签加入到大纲导航中。类似这样： showImg(https://segmentfaul...

susheng 2019-08-26 13:24 评论0 收藏0
页面快速定位到指定位置的几个方法

摘要：但是就页面定位到指定位置其实还有更好的办法，就是使用去获取指定位置的，这样的话还可以加滑动动画，使定位的这个过程比较平滑。需求页面上有一排按钮，悬浮在窗口顶端，不随页面滑动而滑动，这一组按钮分别对应的是页面的各个部分，点击按钮，页面定位到对应的位置。需求分析拿到这个需求，很自然的想到，解决这个最简单的方法是使用锚点（能靠HTML和css解决的，尽量不使用js 解法想到使用锚点...

AlanKeene 2019-08-22 18:10 评论0 收藏0
cocos creator 简单实战

摘要：锚点位置确定后，所有子节点就会以父节点锚点所在位置作为坐标系原点。观察实际效果以下为实际效果，左侧打开栏目为不同手机分辨率模式。巨坑因为分辨率发生变化，导致节点大小位置都会发生变化。项目地址：https://github.com/Iroha1024/... 一个小游戏的demo，以下简单地介绍了我关于cocos creator的一点理解和开发流程版本：cocos creator v...

taowen 2019-08-26 10:31 评论0 收藏0
Markdown-Navbar —— 可能是最好用的markdown文章导航组件

摘要：这可能是最实用的文章结构树组件，使用此组件，你可以为读者显示文章目录点击目录跳转到文章对应内容分享带锚点值的给读者这可能是最实用的markdown文章结构树组件，使用此组件，你可以：为读者显示文章目录点击目录跳转到文章对应内容分享带锚点hash值的url给读者 Best markdown navigation bar for React. git repo Install ...

yexiaobai 2019-08-22 14:48 评论0 收藏0