小程序：定位到页面某一块元素——锚点

最新推荐文章于 2022-08-23 15:14:31 发布
VIP文章 最新推荐文章于 2022-08-23 15:14:31 发布
阅读量2.7k 收藏 11
点赞数 4
分类专栏： 微信小程序前端那点事 文章标签： javascript html 锚点 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39356498/article/details/112168346
版权

小程序：定位到页面某一块元素——锚点

需求：在点击某一块内容之后跳转到页面的指定位置。

方案

将整个页面最外层的view替换为scroll-view，高度设置为页面内容的高度（windowHeight）, 不能设置为100%，那是整个页面的高度，包括屏幕之外看不到的地方。

<scroll-view class="container" style&
最低0.47元/天 解锁文章
阿灿娜
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序——定位/加载到固定元素/位置【锚点】
Dove言和
05-30 6416
需求：进行某一操作后想将当前页面自动定位到某一元素或模块所在位置。 在HTML中，可以用<a href="#id"></a>实现跳转，小程序中则是用scroll-to-view来实现. 将整个页面最外层的view替换为scroll-view，同时需设置高度，此高度要设置为移动设备可视区域高度（注意不能设置为100%，那是整个页面的高度，包括屏幕之外看不到的地方）。获取设...
小程序源码 外卖：实现类似锚点功能 (代码源)
06-22
小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能 (代码源)小程序源码 外卖：实现类似锚点功能
微信小程序滚动锚点定位实现
Beyond the Horizon
05-03 4026
最近开发了一款商城小程序，打算整理一下商城小程序遇到的难点和解决方法。 好多网页页面元素非常多，信息量也非常大，用户在使用过程中可以通过页面导航实现快速的切换，而无需用户来回滚动鼠标，极大提高了用户的体验性，本篇主要介绍在商城列表中如何使用锚点，话不多说上代码。 效果图 list.wxml 这是一个简单的滚动视图，锚点的关键属性就在于scroll-into-view="{{id}}"，通过...
小程序实现锚点效果
yang_da_da的博客
12-08 3225
效果 1.点击tab页跳转至当前锚点内容 2.滚动页面时tab标签自动切换至当前tab 实现 1.wxml 使用scroll-view组件，顶部和内容都设成可滚动的区域 extraHeight是接下来要计算的额外高度，使点击到最后一个tab页时，内容可以在顶部 <view style="height :{{extraHeight}}px"></view> <view class="container"> <scroll-view scroll-x class
【微信小程序之页面跳转】从列表的item项跳转到下一个页面
热门推荐
晚秋星辰
01-15 2万+
很多项目都会有消息记录页，即列表页，紧接着就是点击列表的某一项进入到消息的详情页，本文承接上一篇博客，继续分享如何从列表的item项跳转到下一个页面。 一、效果图从左边的列表页调到右边的详情页二、页面之间的跳转首先要看的是页面的跳转，微信小程序有三种跳转方式可供选择：1、保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。wx.navigateTo({ ur
微信小程序怎么让页面一进入就滑动到指定的位置，有没有类似a标签的锚点属性，点击直接跳到锚点位置呢？
weixin_45463061的博客
02-22 414
微信小程序怎么让页面滑动到指定的位置，有没有类似a标签的锚点属性，点击直接跳到锚点位置呢？ 小程序是有这个锚点的属性的，只是官方的文档写的不太清楚。以下是一进入页面就跳到评论点赞部分的代码 <!-- 评论收藏点赞部分 --> <view id="comment-like-area"> <view>...</view> </view> onReady() { this.pageScrollToBottom(); }, page
锚点
weixin_30369087的博客
03-07 168
在制作网页时，我们常常遇到需要添加侧边导航，通过点击导航让页面自动滚动到指定位置，如：电商网站的楼层。这就涉及到<a>标签的锚点应用，把它称为“锚点标签”。 一、锚点 我们想要让页面跳转到的位置，就是锚点。锚点是一种超链接，只不过它是页面内部的超链接，它指向页面特定的部分。 二、锚点标签运用 要使用锚点定位，需要两个部分组成：1、锚记； 2、指向锚记的链接 有以下...
微信小程序 scroll-view 实现锚点，点击跳到指定页面（位置）
qq_37172200的博客
03-22 4860
微信小程序点击 tab 导航栏，滑动到对应的栏目内容位置，这也是常用的功能。 效果图： 用到的标签是. 用户点击导航标签，触发函数，bindtap=‘jumpTo’，去setdata .标签的 scroll-into-view="{{toViewid}}" ，从而实现滑动跳转。 代码如下： wxml: <view class="list"> <view class="...
小程序源码 外卖：实现类似锚点功能 (代码+截图)
06-19
小程序源码 外卖：实现类似锚点功能 (代码+截图)小程序源码 外卖：实现类似锚点功能 (代码+截图)小程序源码 外卖：实现类似锚点功能 (代码+截图)小程序源码 外卖：实现类似锚点功能 (代码+截图)小程序源码 外卖：...
微信小程序 外卖：实现类似锚点功能 (源码)
05-31
微信小程序 外卖：实现类似锚点功能 (源码)微信小程序 外卖：实现类似锚点功能 (源码)微信小程序 外卖：实现类似锚点功能 (源码)微信小程序 外卖：实现类似锚点功能 (源码)微信小程序 外卖：实现类似锚点功能 (源码)...
微信小程序 外卖：实现类似锚点功能（截图+源码）
05-13
微信小程序 外卖：实现类似锚点功能（截图+源码）微信小程序 外卖：实现类似锚点功能（截图+源码）微信小程序 外卖：实现类似锚点功能（截图+源码）微信小程序 外卖：实现类似锚点功能（截图+源码）微信小程序 外卖...
微信小程序——外卖：实现类似锚点功能（截图+源码）.zip
04-19
微信小程序——外卖：实现类似锚点功能（截图+源码）.zip 微信小程序——外卖：实现类似锚点功能（截图+源码）.zip 微信小程序——外卖：实现类似锚点功能（截图+源码）.zip 微信小程序——外卖：实现类似锚点功能...
微信小程序实现锚点定位楼层跳跃的实例
08-30
主要介绍了微信小程序实现锚点定位楼层跳跃的实例的相关资料,需要的朋友可以参考下
微信小程序源码 外卖：实现类似锚点功能(学习版)
06-18
微信小程序源码 外卖：实现类似锚点功能(学习版)微信小程序源码 外卖：实现类似锚点功能(学习版)微信小程序源码 外卖：实现类似锚点功能(学习版)微信小程序源码 外卖：实现类似锚点功能(学习版)微信小程序源码 外卖...
外卖小程序demo：实现类似锚点功能
06-09
正是大家需要的类似锚点功能，另外也实现了一些外卖app的典型点菜功能，推荐学习研究；
小程序页面跳转后的锚点定位
wgz6101的博客
09-06 301
在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页面 .
微信小程序页面跳转
qq_48627750的博客
04-21 1515
微信小程序为页面跳转准备了许多的API，可以让我们在不同的情况下调用不同的API，下面我就简单介绍一下常见的页面跳转的方法。 1，navigateBack 跳转到上一个页面。假如现在有A，B两个页面，最开始我们在A页面，然后我们通过A页面的一些操作直接进入了B页面，这时我们还想从B页面回到A页面，可以直接用navigateBack；不仅如此我们还可以返回到他的多级上级页面，就是加入有A,B,C三个页面我们从A直接到B，从B直接到C，我们就可以用这个方法直接从C页面跳回到A或B页面 wx.navigate
小程序实现锚点定位
weixin_30500289的博客
08-13 944
在小程序中要实现锚点定位，需要使用到组件scroll-view 点击查看scroll-view组件官网文档 需要用到的是scroll-into-view这条属性，这条属性的官网解释是这样的： scroll-into-viewString值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素 于是乎，我们只需要给scroll-vi...
小程序锚点定位（通讯录）
别告诉我有Bug
08-23 514
小程序锚点
Vue3+ts 跳转页面 定位到某个位置 scrollIntoView 锚点滚动
最新发布
03-28
可以通过以下方式在 Vue3 中实现跳转页面并定位到某个位置的滚动效果： 1. 在目标位置添加一个具有唯一标识的元素（例如 `<div id="target"></div>`），作为锚点。 2. 在跳转页面的组件中，引入 `ref` 和 `onMounted`，并使用 `scrollIntoView` 方法实现滚动： ```typescript <template> <div ref="target" id="target">目标位置</div> <button @click="scrollToTarget">跳转到目标位置</button> </template> <script lang="ts"> import { defineComponent, onMounted, ref } from 'vue' export default defineComponent({ setup() { const targetRef = ref(null) const scrollToTarget = () => { targetRef.value?.scrollIntoView({ behavior: 'smooth' }) } onMounted(() => { if (location.hash === '#target') { scrollToTarget() } }) return { targetRef, scrollToTarget, } }, }) </script> ``` 在 `onMounted` 钩子函数中判断当前页面是否包含 `#target` 锚点，如果有则执行 `scrollToTarget` 方法，实现自动滚动到目标位置的效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值