移动端 vue 中实现锚点定位

作者: WEB小晶 | 来源:发表于2019-05-18 13:18 被阅读0次

移动端 vue 中实现锚点定位
iview 锚点爬坑 && vue 锚点
移动端锚点定位
基于vue-cli3在vue中实现rem布局：postcss-p
解决vue路由与锚点冲突
2019-07-02 overflow 与锚点定位
Android tabLayout+recyclerView实现
无法设置滚动条高度问题
Vue.js 移动端 UI 组件库 YDUI
vue-router和锚点冲突问题

期望效果：点击每个锚点，能够定位到锚点所在的位置。（代码规范采用的是eslint）

简单粗暴代码如下所示：

<a

:key="index"

@click="goAnchor('#anchor-'+index)"

v-for="(item,index) in columns"

class="anchorPoint"

:class="{active:index==nowIndex}"

>{{ item.columnName }}</a>

</div>

goAnchor (selector) {

this.nowIndex = selector.slice(8, 9);

const anchor = this.$el.querySelector(selector);

this.$el.querySelector(selector).scrollIntoView();

}

效果图如图：

移动端 vue 中实现锚点定位
期望效果：点击每个锚点，能够定位到锚点所在的位置。（代码规范采用的是eslint）简单粗暴代码如下所示： ...
iview 锚点爬坑 && vue 锚点
在vue中实现锚点定位效果 iview的锚点原生锚点实现 iview爬坑点且需要把滚动容器的id或者class...
移动端锚点定位
参考：去哪儿：https://touch.dujia.qunar.com/p/item/3807693735?e...
基于vue-cli3在vue中实现rem布局：postcss-p
在vue中实现rem布局：postcss-pxtorem+amfe-flexible实现移动端适配环境参数：vue...
解决vue路由与锚点冲突
传统的锚点定位会与vue-router中的路由设置存在冲突，解决方法自定义锚点跳转： html： js：
2019-07-02 overflow 与锚点定位
overflow 与锚点定位锚点，通俗点的解释就是可以让页面定位到某个位置的点。基于URL 地址的锚链实现锚点...
Android tabLayout+recyclerView实现
在上一篇文章 Android 实现锚点定位中，我们介绍了tablayout+scrollView实现的锚点定位，今...
无法设置滚动条高度问题
问题描述：在实现锚点定位的时候发现无法设置滚动条的位置；在vue中，使用document.body.scroll...
Vue.js 移动端 UI 组件库 YDUI
Vue-ydui 是 YDUI Touch 的一个基于 Vue2.x 的移动端&微信UI实现版本，专为移动端打造，...
vue-router和锚点冲突问题
传统的锚点定位会与vue-router中的路由设置存在冲突，都是使用'#'进行的，所以这里使用一直方法来模拟锚点跳...