小程序实现锚点链接跳转的两种方法
方法1：scroll-view实现
官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html
在微信小程序中，使用 scroll-view 实现长页面的标记跳转，官方文档中没有例子演示，锚点标记主要是使用<scroll-view> 的 scroll-into-view 属性。
实现锚点跳转主要以下几点：
1、最外层容器使用 scroll-view
2、赋值scroll-into-view，如：<scroll-view scroll-into-view="{{toView}}">
3、设置 scroll-view 滚动方向 scroll-y="true"
4、跳转到的位置使用 id (定位)，如：<view id="mark1">
wxml:
//点击要跳转的地方
<view class="list">
<view bindtap=‘jumpTo‘ data-opt="list1">list1</view>
<view bindtap=‘jumpTo‘ data-opt="list2">list2</view>
<view bindtap=‘jumpTo‘ data-opt="list3">list3</view>
</view>
//跳转到的地方
<scroll-view scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true">
<view wx:for="{{list}}" id="{{item}}" class="test">
{{item}}
</view>
</scroll-view>js:
data: {
list: ["list0", "list1", "list2"],
toView: ‘‘
},
jumpTo: function (e) {
// 获取标签元素上自定义的 data-opt 属性的值
let target = e.currentTarget.dataset.opt;
this.setData({
toView: target
})
},提示：测试的数据一定要长，不然就是个坑！！
scroll-view 组件使用的一些注意点：
1. scroll-into-view与 上面提到的子元素id 不能以数字开头
2.bindscroll 属性 实时监听滚动 ； 如上面 页面滚动到一定位置显示导航按钮功能
3.scroll-top 、scroll-left 属性： 设置竖向或者横向滚动条位置，如上面 返回顶部 功能
4.scroll-with-animation 属性：滚动平滑过渡，提高体验
5.如果需要隐藏 scroll-view 的滚动条使用 css::-webkit-scrollbar{width: 0;height: 0;color: transparent;}
6.如果scroll-view占页面整个高度，可设置 scroll-view的高度 height:100vh , 设置height:100%无效（vh：相对于视口的高度。视口被均分为100单位的vh）
方法2：非scroll-view实现
在小程序中实现一般需要借助srcoll-view组件，而srcoll-view在实现效果时，需要指定固定的高，这就让我很头疼了，因为我不知道最终要显示的有多高，动态计算也比较麻烦。有没有其它的办法实现这种滚动效果呢？当然是有的，最终实现了。代码如下：
//锚链接跳转
goToPoint:function(){
// 1:返回一个查询对象的实例
const query=wx.createSelectorQuery();
// 【point1】指的是要跳转的id选择器的元素
// 2：在当前页面下查询指定id选择器的节点，获取节点信息
query.select('#respond').boundingClientRect();
// 3：可用于获取显示区域的尺寸，滚动位置等信息，然后添加节点的滚动位置查询请求
query.selectViewport().scrollOffset();
// 4：开始执行
query.exec((res)=>{
//res[0]是步骤2中的数据，res[1]是步骤3中的数据
if(res[0] && res[1]){
//5：将页面滚动到目标位置
wx.pageScrollTo({
//计算滚动到目标的位置
scrollTop: res[0].top + res[1].scrollTop,
duration:300
})
}
});
},通过这样一个方法，就可以解决了。不需要动态的去计算scroll-view的高度。
参考网址：
https://www.jb51.net/article/174672.htm
https://blog.csdn.net/Acitylion/article/details/97143321
https://blog.csdn.net/love1793912554/article/details/94289856
转载请注明： ITTXX.CN--分享互联网 » 小程序实现锚点链接跳转的两种方法
最后更新：2020-05-27 11:19:19