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

实现如下图，点击右侧的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 = etargetdatasetid;

thistoView='inToView' + _id;

this$apply();

}

4将变量toView初始化为inToViewFind

在data里面初始化toView的值

data ={

toView:'inToViewFind'

}

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

这是一个兼容性问题

在其他手机上可以正常交互，能加载下一页的数据

但是在iPhone XR上会出现第一页数据刚好是一屏的高度，所以不能再往上滑动了，导致不能加载更多

解决方案：

就是修改每页加载的数据量，简单粗暴的解决办法，23333333

前几天在开发注册功能时，需要d一个显示注册协议的Modal，由于协议文字很长，需要用户手动滑动查看。

于是理所当然地使用一个view元素包裹协议内容，然后设置height，并设置 overflow-y: auto ，这样设置后在 微信开发工具 上使用鼠标滚轮滑动ok，但是过两天在真机上测试，what，无论我手指怎么滑都滑不动。

经过一通仔细 (胡乱) 调试，最终使用 scroll-view 解决了这个问题。

注意：使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height。

关于 scroll-view 的更多介绍，请移步 >

以上就是关于小程序如何使用锚点实现定点跳跃全部的内容，包括:小程序如何使用锚点实现定点跳跃、微信小程序 scroll-view 上滑没有加载更多问题、uni-app踩坑：微信小程序中view设置overflow: auto无法手势滑动等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！