摘要：背景最近在开发小程序的时候，遇到一个在页面上做锚点的需求查阅了一下，小程序的锚点和浏览器中的锚点是不一样的，所以不能用标签加锚点来实现实现通常，在小程序中，可以用标签的属性进行跳转，这是网上常见的方法，具体方法，就不详细说了，可以参
背景
最近在开发小程序的时候，遇到一个在页面上做锚点的需求
查阅了一下，小程序的锚点和浏览器中html的锚点是不一样的，所以不能用 a 标签加 #锚点 来实现
scroll-view实现通常，在小程序中，可以用scroll-view标签的scroll-into-view属性进行跳转，这是网上常见的方法，具体方法，就不详细说了，可以参考这篇文章 微信小程序-锚点定位
但是scroll-view实现的锚点有一些缺点：
使用了scroll-view，就不能使用页面的下拉刷新 onpulldownrefresh，scroll-view 使用提示
计算高度实现这个方法的基本思路是：计算出锚点相对于页面的高度，使用wx.pageScrollTo滚动到锚点位置
具体方法如下：
首先，计算出锚点元素相对于当前可视区域的高度，即元素和小程序title的距离，文档 wx.createSelectorQuery，fields
wx.createSelectorQuery().select("#anchor").fields({
rect: true
}, function (res) {
a = res.top
}
然后，计算出当前页面滚动的高度，即html中的scrollTop，即页面元素顶部距离小程序title的距离，文档 scrollOffset
wx.createSelectorQuery().selectViewport().scrollOffset(function(res){
b = res.scrollTop
})
最后，使用wx.pageScrollTo滚动到锚点位置，文档 wx.pageScrollTo
wx.pageScrollTo({
scrollTop: a + b
});
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/54199.html
微信小程序开发总结 基础的配置及视图层、逻辑层自己看文档 [微信小程序文档][1] 这里只说一下自己的经验总结 提醒 微信小程序不运行在浏览器，所以不能操作Dom，也没有document、window对象 每一个页面路径最多五层 eg：页面A->页面B->页面C->页面D->页面E->（页面F是跳转不出来的） 注：不经过redirect，redirect后的页面算是第一层，但是没有-返回-按钮...
微信小程序开发总结 基础的配置及视图层、逻辑层自己看文档 [微信小程序文档][1] 这里只说一下自己的经验总结 提醒 微信小程序不运行在浏览器，所以不能操作Dom，也没有document、window对象 每一个页面路径最多五层 eg：页面A->页面B->页面C->页面D->页面E->（页面F是跳转不出来的） 注：不经过redirect，redirect后的页面算是第一层，但是没有-返回-按钮...
微信小程序开发总结 基础的配置及视图层、逻辑层自己看文档 [微信小程序文档][1] 这里只说一下自己的经验总结 提醒 微信小程序不运行在浏览器，所以不能操作Dom，也没有document、window对象 每一个页面路径最多五层 eg：页面A->页面B->页面C->页面D->页面E->（页面F是跳转不出来的） 注：不经过redirect，redirect后的页面算是第一层，但是没有-返回-按钮...
摘要：使用实现瀑布流并不实用，因为实现的瀑布流都是以列来排列的，这里记录下用实现瀑布流，以及微信小程序中使用左右两列来实现瀑布流效果图原生实现瀑布流文件图片可以自己找点替换下就可以了文件添加阴影的时候，加上会显得更加有点悬浮感文件计算图片列数 使用css实现瀑布流并不实用，因为css实现的瀑布流都是以列来排列的，这里记录下用js实现瀑布流，以及微信小程序中使用左右两列来实现瀑布流 1.效果图...
阅读 1903·2021-11-05 09:42
阅读 2665·2021-09-23 11:21
阅读 2642·2019-08-30 14:00
阅读 3201·2019-08-30 13:15
阅读 370·2019-08-29 17:18
阅读 3408·2019-08-29 16:29
阅读 2620·2019-08-29 14:06
阅读 2686·2019-08-23 14:41
