小程序如何实现锚点跳转的效果？

最新推荐文章于 2025-03-12 14:36:48 发布

原创

最新推荐文章于 2025-03-12 14:36:48 发布 · 622 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文详细介绍了如何在微信小程序中利用scroll-view组件实现锚点跳转效果，包括atml和js文件的配合使用，以及设置scroll-into-view属性和监听滚动事件的方法。通过实例演示了如何根据点击事件动态切换滚动到不同内容区域。

小程序如何实现锚点跳转的效果？

小程序的scroll-view的使用
- 1.1 ```.atml```文件:
- 1.2 ```.js```文件

小程序的scroll-view的使用

示例如下：

1.1 `.atml`文件:

<scroll-view scroll-y="true" style="height: { 
       { 
       height+'px'}};" scroll-into-view="{
    
    { detail }}" scroll-with-animation="true

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Dark_programmer

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

小程序实现锚点跳转

JavaScritp

12-02

1327

小程序实现锚点跳转（非scroll-view实现）通过点击事件跳转到指定的位置，在HTML中很容易实现。但在小程序中一般需要借助scroll-view组件来实现，而scroll-view在实现效果时，需要指定固定的高，但大多数时候我们不知道最终要显示的有多高，动态计算也比较麻烦。有没有其它的办法实现这种滚动效果呢？当然是有的。通过给跳转位置绑定id类名的方式（类名必须是id），就可以实现，具体...

微信小程序实现锚点跳转

weixin_45879374的博客

11-09

601

微信小程序实现锚点跳转

参与评论您还未登录，请先登录后发表或查看评论

【微信小程序】 scroll-view 实现锚点跳转

qq_25285531的博客

02-27

1510

在微信小程序中，使用 scroll-view 实现长页面的标记跳转，官方文档中没有例子演示，锚点标记主要是使用<scroll-view> 的scroll-into-view属性。实现锚点跳转主要以下几点： 1、最外层容器使用scroll-view 2、赋值scroll-into-view，如：<scroll-viewscroll-into-view="{{toVie...

小程序-uni-app：实现锚点连接/锚点跳转(uni.pageScrollTo、scroll-into-view)

snow的博客

07-09

6794

Uniapp支持锚点连接，可以通过以下步骤实现锚点连接。

微信小程序 scroll-view 实现锚点跳转

weixin_34275734的博客

02-27

934

微信小程序-实现锚点跳转，页面加载后自动跳转、点击跳转到指定位置

最新发布

FaxMiao的博客

03-12

966

二、点击事件，跳转到指定ID位置，需要位置bind:tap就可以了。一、页面加载后滚动到指定位置，onLoad或onReady里执行。三、完整代码下载链接。

微信小程序 -- 锚点跳转（scroll-view）

J_012345的博客

05-27

452

一、前端简介 1、什么是前端？前端是Web前端开发工程师的简称，主要是利用HTML,CSS,JS等技术，同时结合后台开发技术对产品进行开发。 2、什么是HTML？（1）是超文本标记语言（hyper text marked language）。（2）是网页的骨架，作用是显示所有能看到的网页元素，包括：文字，图片，超链接，表格，视频，声音等。（3）具有通用性，不限操作系统。二、开发工具简称三、常用的html标签 1、块级元素（1）html，网页开始的位置（2）h.

微信小程序 scroll-view 实现锚点跳转功能

10-15

主要介绍了微信小程序 scroll-view 实现锚点跳转功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

微信小程序scroll-view锚点链接滚动跳转功能

10-15

主要介绍了微信小程序scroll-view锚点链接滚动跳转功能，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

微信小程序实现锚点功能

12-13

“锚点”功能在实际应用设计的好，可以提高用户体验。今天碰到一个类似下面功能：由于页面数据比较多，除了做些上拉加载，下拉刷新等优化。还可以进行进行分类，如上图。功能要求:点击导航的菜单，相应页面的分类内容滑动到页面顶部。由于微信小程序页面无dom操作，改功能改如何操作呢？一开始想到 wx.pageScrollTo(Object object) 这个API，由于每个点击每个导航利用wx.pageScrollTo滚动到相应分类的scrollTop不能确定，所以放弃了。后发现 scroll-view 组件的属性 scroll-into-view 可以利用一下： <scroll-view s

微信小程序实现锚点定位楼层跳跃的实例

01-03

微信小程序实现楼层锚点跳跃，点击不同的锚点进行位置跳跃：利用：scroll-into-view 来实现效果图如下： WXML: <scroll class=content scroll-into-view={{toView}} scroll-y=true scroll-with-animation=true> <view wx:for={{act_addList}}> <view class=address_top id={{>{{item.region}}</view> <view wx:f

小程序跳转到指定节点，锚点效果，非scroll-view实现

selectDele的博客

06-29

815

goAnchorPoint: function(e) { //1、返回一个查询实例 const query = wx.createSelectorQuery(); //2、选择要跳转的节点id query.select('#priceInfo').boundingClientRect(); //3、获取显示区域的尺寸、滚动等位置等信息，然后添加节点的滚动位置查询 query.selectViewport().scrollOffset(); //4、执行跳转 qu

小程序锚点的使用

hql1024的博客

06-23

594

<scroll-view scroll-into-view="{{toView}}" style="height:{{pageGaodu.windowHeight}}px" scroll-y="true" scroll-with-animation="true"> <view bindtap="wxpaley" data-havs="havs"> 点击去目标地方 </view> <view class="shopListTitle" id='havs'&g

小程序scroll-view实现锚点跳转

eva_feng的博客

03-23

1236

在微信小程序中，使用 scroll-view 实现长页面的锚点跳转。主要是使用 scroll-into-view属性，在这里做个记录。 wxml <view class="tab-section" > <view class="{{activeView =='productBox' ? 'active':''}}" bindtap="toViewClick" data-...

小程序页面跳转后的锚点定位

wgz6101的博客

09-06

389

在A页面对a订单操作后跳转到B页面自动定位到B页面的a订单位置 .js Page({ data: { height: (wx.getSystemInfoSync().windowHeight), orderList:'' }, onLoad: function (options) { this.setData({ orderId: "goto" + options.orderid }) } }) 从A页面把orderId传到B页面 .

微信小程序中实现超链接锚点跳转的技巧

在微信小程序中实现超链接锚点跳转是一个涉及到小程序前端开发技术的话题。首先，我们需要了解什么是超链接锚点，以及它在网页和微信小程序中的基本应用原理。 ### 什么是超链接锚点超链接锚点，通常简称为锚点，...

小程序如何实现锚点跳转的效果？

小程序如何实现锚点跳转的效果？

小程序的scroll-view的使用

1.1 .atml文件:

1.1 `.atml`文件: