微信小程序模拟锚点跳转

利用scroll-view组件:

可以利用scroll-view组件的scroll-into-view属性来实现。

scroll-into-view 与子元素的id不能以数字开头;
scroll-view需要设置明确的高度;

在这里插入图片描述

与下拉刷新和上拉加载的问题:

scroll-view组件无法使用下拉刷新和上拉加载。

利用wx.pageScrollTo():

id不能以数字开头;
父元素乃至祖先元素都不能使用overflow,否则会出现success成功,但是页面并不滚动的现象。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

与下拉刷新和上拉加载的问题:

wx.pageScrollTo()的滚动会默认触发下拉刷新和上拉加载。

解决方法:定义一个全局变量isSearchScroll;如果执行了wx.pageScrollTo(),则设置isSearchScroll为true;在onReachBottom()中,判断如果isSearchScroll为false,才执行加载下一页的操作,否则不执行任何操作;然后在onReachBottom()中设置isSearchScroll为false。
在这里插入图片描述
在这里插入图片描述

发布了258 篇原创文章 · 获赞 21 · 访问量 5万+

猜你喜欢

转载自blog.csdn.net/wsln_123456/article/details/104536806
今日推荐