小程序如何使用锚点实现定点跳跃

实现如下图，点击右侧的A/B/C/D....可以快速定位到该字母开头的城市列表。这类似于在html中用a标签实现的锚点跳跃功能。那在小程序中应该如何实现呢。在小程序官方文档中提到scroll-view，scroll-view有并塌scroll-into-view这一属性

根据页面的实现，页面分为两大节点，滚动视图区域和定位标签

<scroll-view>......</<scroll-view> //纯尘这里面写页面的其他所有内容

<view>......</view> //这里面写快速定位的A/B/C/D...

<scroll-view>根据页面又分为三层，搜索框层，热门城市层，按照字母排序的所有城市层，按照个人需求去实现

接下来讲如何实现锚点的定点跳跃，scroll-view的属性scroll-into-view用来定义scroll-view滚动到哪个区域显示，所以每块以字母开头的城市列表区域的id与scroll-into-view的值是绑定关系，而定位的标签用来改变scroll-into-view的值

实现步骤：

1. scroll-view 设置属性

scroll-y=‘true’运行其竖向滚动，scroll-with-animation=‘true’显示滚动动画，scroll-into-view与变量toView绑定。

2.定义好每一个需要被快速定位的区域的ID名做蔽禅，如下的 inToViewFind、inToViewhot、inToViewA、inToViewB、inToViewC......

3.将定位标签A/B/C/D...绑定好点击事件bindtap='scrollToViewFn'

在methods里面写好该点击事件

scrollToViewFn(e) {

var _id = e.target.dataset.id

this.toView='inToView' + _id

this.$apply()

}

4.将变量toView初始化为inToViewFind

在data里面初始化toView的值

data ={

toView:'inToViewFind'

}

这样便可以实现html里面a标签的锚点跳跃的功能

在小程序中可以实现锚点旦中定位。

需要用到的是scroll-into-view这丛迟棚条属性，渗则scroll-into-viewString值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素。

微信小程序中scroll-into-view跳转到指定位置是这样使用的：

1、首先第一步，打开微信开发者工具。

2、其次第二步，打开wxml文件，然后在文件里先新建一个scroll-view的标签即可。

3、再次第三步，设置这个scroll-into-view滚动的方向设置为x轴，与此同时设置scroll-into-view的值，这个值就是子元素中的id，表示滚动到哪一个元素历模简，如下图所示。

4、接下来就是设置子元素，先新建一个view的子元素，然后设置class和id，并且多设置几个view标签，以便观察效果。

5、最后一肢裤步，点击打开模拟器，在下面我们码历就可以看到滚动的元素，接着就按照我们之前设置的显示就行了。

---