zoukankan      html  css  js  c++  java
  • uniapp实现锚点跳转

    将uniapp的uni.createSelectorQuery()方法与uni.pageScrollTo(OBJECT)方法结合使用

    更详细用法见官方文档:
    uni.createSelectorQuery()方法: https://uniapp.dcloud.io/api/ui/nodes-info?id=createselectorquery
    uni.pageScrollTo(OBJECT)方法: https://uniapp.dcloud.io/api/ui/scroll?id=pagescrollto

    核心代码

    //从当前位置到达目标位置
                uni.createSelectorQuery().select('.comment-content').boundingClientRect(data=>{//目标位置的节点:类或者id
                      uni.createSelectorQuery().select(".arc-content").boundingClientRect(res=>{//最外层盒子的节点:类或者id
                            uni.pageScrollTo({
                                  duration: 100,//过渡时间
                                  scrollTop:data.top - res.top  ,//到达距离顶部的top值
                            })
                      }).exec()
                }).exec();
    

    代码示例

    <template>
          <view class="arc-content" id="arc-content">
                <view class="info-content">文章区域。。。</view>
                <view class="comment-content" id="comment-content">评论区域。。。</view>
          </view>
    </template>
    
    
    togglePosition(){
          if(this.positionSelect){
                this.positionSelect=false
    
                //从评论区域回到顶部
                uni.createSelectorQuery().select('.comment-content').boundingClientRect(data=>{//目标位置的节点:类或者id
                      uni.createSelectorQuery().select(".arc-content").boundingClientRect(res=>{//最外层盒子的节点:类或者id
                            uni.pageScrollTo({
                                  duration: 100,//过渡时间
                                  scrollTop:res.top - data.top  ,//返回顶部的top值
                            })
                      }).exec()
                }).exec();
    
          }else{
                this.positionSelect=true
    
                //从当前位置到达评论区域
                uni.createSelectorQuery().select('.comment-content').boundingClientRect(data=>{//目标位置的节点:类或者id
                      uni.createSelectorQuery().select(".arc-content").boundingClientRect(res=>{//最外层盒子的节点:类或者id
                            uni.pageScrollTo({
                                  duration: 100,//过渡时间
                                  scrollTop:data.top - res.top  ,//到达距离顶部的top值
                            })
                      }).exec()
                }).exec();
          }
    },
    
  • 相关阅读:
    机器学习问题
    sklearn学习笔记
    机器学习之广义线性模型
    因子学习笔记、问题汇总
    数学相关知识汇总
    下载技巧汇总
    python scipy库
    20180122 PyTorch学习资料汇总
    机器学习基本概念笔记
    机械学习框架、分类
  • 原文地址:https://www.cnblogs.com/huihuihero/p/13355355.html
Copyright © 2011-2022 走看看