微信小程序上没有类似 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),否则无效