微信小程序中scroll-view实现锚点滑动

发布日期： 2018-06-27 阅读量： 作者： 网络

本篇文章主要介绍了微信小程序 scroll-view实现锚点滑动的示例，内容挺不错的，现在分享给大家，也给大家做个参考。

前言

最近开始做小程序，通读一遍文档再上手并不算难，但不得不说小程序里还是有一些坑。这里说一下如何实现页面锚点跳转，一个城市列表的效果示意图如下：

因为在微信小程序的环境中不能想在浏览器里设置标签，或者操作dom滚动，传统做法就行不通了，一切都得按小程序的文档来。

一开始我们的做法是使用boundingClientRect()方法获取每个锚点的坐标，然后再用wx.pageScrollTo()方法滑动过去。结果发现效果不是很好，因为boundingClientRect方法返回的每个点的坐标会随着屏幕滑动而变化，可能还会引起页面抖动，最后还是选择scroll-view(可滚动视图区域)组件来实现锚点效果。

具体实现

具体API就不赘述了，可以去看官方文档，这里讲几个需要注意的地方，下面是一个示意的scroll-view组件代码，上面的几个属性是必须的：

<scroll-view></scroll-view>

# 微信小程序 # scroll-view # 锚点滑动 # 锚点

上一篇: golang框架的集成测试指南

下一篇: win10系统能否恢复到未激活状态

微信小程序中scroll-view实现锚点滑动

随便看看