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();
          }
    },
    
  • 相关阅读:
    34 bootstrap引入
    32 jQuery——自制飞粒特效
    32 EasyUI——初识、导入至项目
    前端学习相关
    31 jQuery——元素进出场动画效果
    30 jQuery——操作事件
    30 jQuery——操作文档结构
    29 jQuery——操作元素样式
    28 jQuery——操作元素内容
    27 jquery——操作元素属性
  • 原文地址:https://www.cnblogs.com/huihuihero/p/13355355.html
Copyright © 2011-2022 走看看