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

实现如下图，点击右侧的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标签的锚点跳跃的功能

建行到家小程序修改定位步骤如下:

第一种方法，打开中国建设银行App以后，点击下方“xyk”。然后上面就有一个地区名字，点击一下。就会显示一个城市选择框，输入城市名称搜索，或者下拉下面的列表选择你当前的城市。点击以后，就能立即切换过来。

第二种方法，点击首页右下角“悦享生活”。左上角也会显示城市名称，点击一下。同样会d出城市选择窗口，选择的方法和前面一样。

自小程序的第一个版本上线快一个月了，从微信搜索使用一直没什么问题，所以以为挺稳定了，没想到昨晚我们的运营在推文中加上了小程序的链接，想从推文直接跳转至小程序首页的时候，却发现跳过去了之后页面加载异常了，表现为一片空白，死活都加载不出来数据。

由于推文中配的小程序链接只能跳转线上的小程序，并不能配置体验版本的小程序，所以只能靠推理解决这个bug。

接下来我开始了修复之旅...

首先我看了一下相关的函数，写得很简单

从入口函数来看，分了三种情况：

1：从城市列表跳转过来的时候会携带一些参数，例如城市id等。这种情况会先进入initData() 函数进行一些初始化。

2：如果页面有缓存数据，也会先进入initData() 函数。

3：如果是从微信直接进入小程序，并且没有过缓存，我把这种情况当作最初始的一种情况，这时候就正常地走获取数据流程，即直接调用getData() 函数获取数据。

1、首先根据页面加载的时候没有出现loading，那么程序并没有执行 getData() 函数。所以肯定不是一开始就执行 this.getData()。

2、清除缓存，移除小程序，再次进入小程序，仍然出现一片空白，那么知道并不是因为缓存问题，所以也排除第二种情况。

3、至于第一种情况，我是比较认同的。因为当初我只是想到从微信直接打开小程序的场景，却忽略了从公众号推文（甚至别的渠道）进入的场景。据我之前开发公众号的经验推测，从推文进入的时候微信极大可能会在url上携带一些乱七八糟的参数，这些参数正符合第一种情况的条件，进而进入了this.initData(options)。

4、来看data.flag 的值，如果等于0，那么调用this.getData()，已知this.getData()并没有被执行，所以data.flag 不等于0；如果 this.showFail = true 的话，那么会显示一个失败页，但页面是空白的，并没出现失败页，由此可知data.flag 并不等于1 或者 2。接下来没有路可走了，所以会出现空白页，这就说得过去了。

5、之所以会进入initData()函数，上面提过是别的微信自动加入的参数导致的，这些参数并不是我需要的（比如很关键的一个参数flag），但是却阴差阳错地成为了进入initData()函数的充分条件，此时flag 应该是undefined。所以形式就很明朗了，只要把进入的条件写得严谨一些如：

尽量从源头制止，并把initData函数改造如下，保证有一条通路可走：

到这里，我觉得应该是没问题的了。然后提交审核啦，审核很快就通过了，然后把小程序发布上去，然后开始验证，再次从当初那篇推文进入小程序...发现Ok啦，出来数据啦

哈哈 谨记录一下这个坑！

---