欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。

文摘  小程序实现锚点链接跳转的两种方法

小程序应用 本站 588 0评论

小程序实现锚点链接跳转的两种方法


方法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

赞 (8) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽