微信小程序锚点定位使用教程

最新推荐文章于 2024-07-22 11:20:48 发布
最新推荐文章于 2024-07-22 11:20:48 发布
阅读量1.8k 收藏 5
点赞数
分类专栏： 小程序js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/H_c_l/article/details/104694678
版权
本文介绍了如何在微信小程序中实现类似PC网页的锚点定位功能。通过设置page高度为100%，使用scroll-view组件，并配置scroll-into-view、scroll-y属性，结合锚点，可以实现在商品详情等页面的导航定位。
摘要由CSDN通过智能技术生成

在商品详情页面，一般会有商品图显示、商品主要信息、评价、商品详情等，这时候最好是在最上面加上导航，点击导航定位到对应的页面位置。

比如在京东的商品详情页面，对于一般的PC端网页，只需要使用 ，然后在地址栏最后加上#element_Id，就能很方便的跳转到该元素的位置。

1.将page的高度设置为100%；

2.导航下面的内容部分必须用 包起来

3.设置scroll-view的高度=屏幕的高度-导航的高度

4.设置scroll-view的属性 scroll-into-view="{{toView}}"

5.设置scroll-view的属性 scroll-y=“true”

6.设置锚点

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

H_c_l
关注
专栏目录
微信小程序——定位/加载到固定元素/位置【锚点】
Dove言和
05-30 6569
需求：进行某一操作后想将当前页面自动定位到某一元素或模块所在位置。 在HTML中，可以用<a href="#id"></a>实现跳转，小程序中则是用scroll-to-view来实现. 将整个页面最外层的view替换为scroll-view，同时需设置高度，此高度要设置为移动设备可视区域高度（注意不能设置为100%，那是整个页面的高度，包括屏幕之外看不到的地方）。获取设...
微信小程序基于scroll-view实现锚点定位
findhappy117的博客
09-23 7875
代码地址如下：http://www.demodashi.com/demo/14009.html 一、前期准备工作 软件环境：微信开发者工具 官方下载地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1、基本需求。 基于scroll-view实现锚点定位 2、案例目录结构 二、程序实现具体步骤 1.锚点i...
微信小程序实现锚点定位
weixin_33997389的博客
02-07 1630
2019独角兽企业重金招聘Python工程师标准>>> ...
微信小程序不用scroll-view做锚点跳转以及滑动选中
Wangdr的博客
07-22 419
微信小程序不用scroll-view做锚点跳转以及滑动选中
小程序锚点定位
qq_37698249的博客
10-12 1265
小程序锚点定位 // 1.最外层需要用scroll-view包裹，scroll-view必须给固定高度以及scroll-y // 2.scroll-into-view(值应为某子元素 id，则滚动到该元素，元素顶部对齐滚动区域顶部) // 3.给目标容器添加id属性 // 4.滚动后，需要通过onScroll方法清除scroll-into-view的值，用来二次锚点定位 // index.axml <scroll-view class="index-page" scroll-into-view="{
微信小程序-锚点定位+内容滑动控制导航选中
weixin_34049032的博客
03-19 4152
之前两篇文章分别介绍了锚点定位和滑动内容影响导航选中，这里我们就结合起来，实现这两个功能！ 思路不再多说，直接上干货！ WXML <view class="navigateBox"> <view class="title"> <image wx:if="{{actionView=='productBox'}}" src="../images/positi...
微信小程序实现锚点定位楼层跳跃的实例
08-30
1. 使用scroll-into-view来实现锚点定位楼层跳跃：在微信小程序中，可以使用scroll-into-view属性来实现锚点定位楼层跳跃的功能。通过设置scroll-into-view的值为要跳跃到的锚点的id，可以实现锚点定位楼层跳跃的...
微信小程序实现锚点效果，方法简单实用！
06-06
在微信小程序开发中，实现页面内的锚点效果可以让用户快速定位到页面的特定区域，提升用户体验。本教程将深入探讨如何在微信小程序中简洁高效地实现这一功能。 首先，我们需要理解锚点的基本原理。在HTML中，锚点是...
微信小程序设置锚点定位，wx.pageScrollTo
qq_36396822的博客
04-18 1490
在通过wx.createSelectorQuery().select(“#home”).boundingClientRect(res => {}), 获取设置的跟锚点home。通过wx.createSelectorQuery().select(类名).boundingClientRect(res => {}),， 获取锚点中的数据。在通过wx.pageScrollTo({ selector: “.container”, scrollTop: 滑动的距离 });在其中，设置一个容器 home 设置id。
微信小程序实现锚点功能
10-15
在微信小程序中，实现锚点功能对于提升用户体验至关重要，特别是在内容丰富的页面中。锚点功能允许用户通过点击导航菜单快速定位到页面内的特定位置。在微信小程序中，由于没有DOM操作，我们需要寻找其他方法来实现...
小程序锚点定位（通讯录）
别告诉我有Bug
08-23 625
小程序锚点
微信小程序实现锚点导航栏
m0_63984415的博客
07-31 549
这里是使用标签控制滚动，前提是scroll-view有固定的高度，给左侧标签添加scroll-y scroll-with-animation属性，给滚动的元素绑定bindscroll方法，滚动时获取滚动位置，赋值固定id。
微信小程序滚动锚点定位实现
Beyond the Horizon
05-03 4080
最近开发了一款商城小程序，打算整理一下商城小程序遇到的难点和解决方法。 好多网页页面元素非常多，信息量也非常大，用户在使用过程中可以通过页面导航实现快速的切换，而无需用户来回滚动鼠标，极大提高了用户的体验性，本篇主要介绍在商城列表中如何使用锚点，话不多说上代码。 效果图 list.wxml 这是一个简单的滚动视图，锚点的关键属性就在于scroll-into-view="{{id}}"，通过...
微信小程序使用scroll-view进行锚点定位
sxs7970的博客
11-17 1546
使用scroll-view进行锚点定位，索要跳转的元素，必须包含在这个组件里边，也就是最外层是scroll-view; 使用scroll-y 和 scroll-into-view 这两个属性，必须让 scroll-into-view组件内部的子元素 的 id 值等于 scroll-into-view 的值； 一定要给scroll-view设置一个高度，或者 100% wxml <v...
微信小程序scroll-view 做类似锚点
lingjim10086的博客
11-17 282
只要替换scroll-into-view的值就可以了。（值为子元素的id名） JS Page({ data: { toView: 'green' }, tapTo(e) { console.log(e) this.setData({ toView: e.currentTarget.dataset.into }) } }) }) WXML <view class="container"> <view class="page-b
微信小程序 scroll-view 实现锚点，点击跳到指定页面（位置）
qq_37172200的博客
03-22 5048
微信小程序点击 tab 导航栏，滑动到对应的栏目内容位置，这也是常用的功能。 效果图： 用到的标签是. 用户点击导航标签，触发函数，bindtap=‘jumpTo’，去setdata .标签的 scroll-into-view="{{toViewid}}" ，从而实现滑动跳转。 代码如下： wxml: <view class="list"> <view class="...
微信小程序笔记-- 锚点定位（还是以外卖小程序为例）
热门推荐
weixin_42526917的博客
07-20 1万+
最近在学习微信小程序，想到这个功能用到的地方应该不少就找了很多博客和文档看看，做了一个简易版的，如果有更好的方法或者建议，请告知，多谢！ 先上效果图 相对于vue，微信小程序真是简单很多啊，我们只需要用到一个组件scroll-view 具体请参考官方文档scroll-view。 1、wxml 我这样写，scroll-with-animation="true" 加上动画更好看。 ...
微信小程序锚点定位方法和引入
最新发布
09-25
微信小程序中的锚点定位主要是通过`wx.navigateTo`或`wx.redirectTo`这两个API，并配合页面内的`<navigator>`标签实现的。当你需要跳转到指定的内部位置时，可以在路径中添加`#`和锚点名称。 例如： ```javascript // 跳转到某个锚点 wx.navigateTo({ url: '/pages/index/index?hash=section2', }) // 或者使用小程序的原生语法 <navigator open-type="navigate" url="/pages/index/index?hash=section2"></navigator> ``` 这里的`section2`就是锚点名称。在目标页面中，可以监听hashchange事件来响应锚点的变化： ```javascript Page({ onReady() { wx.onHashChange(() => { const hash = wx.getStorageSync('hash') || wx.querySelector('#hash').dataset.hash; if (hash) { this.setData({ currentSection: hash }); // 这里可以根据锚点做相应的内容切换或者其他处理 } }); }, }) ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值