微信小程序:实现跳转页面到其它页面的指定位置的方法
2021/11/5 17:13:01
本文主要是介绍微信小程序:实现跳转页面到其它页面的指定位置的方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
微信小程序上没有类似 html 锚点链接的方法,但在一些开发场景下却又有这样的需求,我们只能想办法来实现曲线救国了。这篇文章主要介绍了实现跳转页面到其它页面的指定位置的方法(示例代码)以及相关的经验技巧。
实现思路
在微信小程序中,使用 scroll-view 实现长页面的标记跳转,锚点标记主要是使用 的 scroll-into-view 属性。
实现锚点跳转主要以下几点:
1、最外层容器使用 scroll-view
2、赋值scroll-into-view,如:
3、设置 scroll-view 滚动方向 scroll-y=“true”
4、跳转到的位置使用 id (定位),如:<view id="one"></view>
实现代码
实现页面跳转,跳转到其他页面的指定锚点位置
源页面:index
// index.wxml <view class="btn" bindtap="jump" data-detail="detail0" > 跳到 detail0 锚点位置 </view> <view class="btn" bindtap="jump" data-detail="detail1" > 跳到 detail1 锚点位置</view> <view class="btn" bindtap="jump" data-detail="detail2" > 跳到 detail2 锚点位置 </view> <view class="btn" bindtap="jump" data-detail="detail3" > 跳到 detail3 锚点位置 </view>
// index.js jump (event) { // 获取到跳转锚点id let detail = event.currentTarget.dataset.detail; wx.navigateTo({ url: '../view/view?detail=' + detail, // 通过url传到跳转页面 }) }
要跳转的目标: view
页面
// view.wxml <view> <scroll-view scroll-y="true" style="height: {{height+'px'}};" scroll-into-view="{{ detail }}" scroll-with-animation="true" > <view id="detail0" style="height: 500px" > detail0 </view> <view id="detail1" style="height: 500px" > detail1 </view> <view id="detail2" style="height: 500px" > detail2 </view> <view id="detail3" style="height: 500px" > detail3 </view> </scroll-view> </view>
// view.js data: { detail: 'detail0', // 锚点id height: 0, // 屏幕的高度 }, /** * 生命周期函数--监听页面加载 */ onl oad(options) { var that = this; console.log(options.detail); this.setData({ height: wx.getSystemInfoSync().windowHeight, // 获取屏幕高度 detail: options.detail // 获取跳转过来的锚点id }) },
需要注意的事项:
-
scroll-y=“true” 允许Y轴滚动;
-
scroll-into-view="{{ detail }}" 值应为某子元素id(id不能以数字开头)。设置哪个方向可滚动,则在哪个方向滚动到该元素;
-
scroll-with-animation=“true” 在设置滚动条位置时使用动画过渡
-
scroll-view 一定要设置 height: 的值 (px / rpx),否则无效
这篇关于微信小程序:实现跳转页面到其它页面的指定位置的方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01微信小程序教程:零基础入门到实战
- 2024-11-01微信小程序全栈教程:从入门到实践
- 2024-10-31微信小程序怎么实现关注公众号功能-icode9专业技术文章分享
- 2024-10-30微信小程序cover-view,支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序的cover-image支持bindtap吗-icode9专业技术文章分享
- 2024-10-30微信小程序web-view怎么设置高度?-icode9专业技术文章分享
- 2024-10-30微信小程序中 onLoad和onready哪个先加载-icode9专业技术文章分享
- 2024-10-29小程序 wx.getStorageSync('token')如何清除-icode9专业技术文章分享
- 2024-10-29小程序防止冒泡e.stopPropagation()是什么-icode9专业技术文章分享
- 2024-10-29小程序的点击事件页面如何写-icode9专业技术文章分享