微信小程序：实现跳转页面到其它页面的指定位置的方法

微信小程序上没有类似 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,  // 屏幕的高度
},
 /**
 * 生命周期函数--监听页面加载
  */
 onLoad(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），否则无效