uniapp回到指定位置

作者: 羽翼的翼 | 来源:发表于2020-05-10 11:39 被阅读0次

最近用uniapp写的一个小程序中用到了类似于锚点定位的功能,做一个总结

效果

下方为实际用到的方法

第一步:先给元素定义上id
第二步:使用uni.createSelectorQuery().select(id).boundingClientRect

// 锚点定位
              toHref(id) {
                  let thas = this
// 先定位到顶方
                  uni.pageScrollTo({
                      scrollTop: 0,
                      duration: 0
                  });
// 再调用此方法回到相应位置  id为项目中要回到指定位置的元素的id
uni.createSelectorQuery().select(id).boundingClientRect(function(rect){
                        console.log(rect, 'rect')
                        uni.pageScrollTo({
                            scrollTop: rect.top,
                            duration: 300
                        });
                          // rect.id      // 节点的ID
                          // rect.dataset // 节点的dataset
                          // rect.left    // 节点的左边界坐标
                          // rect.right   // 节点的右边界坐标
                          // rect.top     // 节点的上边界坐标
                          // rect.bottom  // 节点的下边界坐标
                          // rect.width   // 节点的宽度
                          // rect.height  // 节点的高度
                    }).exec()
                    
              },

相关文章

网友评论

    本文标题:uniapp回到指定位置

    本文链接:https://www.haomeiwen.com/subject/uradnhtx.html