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

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),否则无效



这篇关于微信小程序:实现跳转页面到其它页面的指定位置的方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程