实现页面跳转，跳转到指定锚点位置
在 index.wxml 页面创建跳转按钮
<!-- 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
// index.js
Page({
data: {},
// 跳详情页
jump (event) {
// 获取到跳转锚点id
let detail = event.currentTarget.dataset.detail;
wx:wx.navigateTo({
url: \'/pages/index/detail?detail=\' + detail, // 通过url传到跳转页面
})
},
})
detail.wxml 跳转的页面
使用 scroll-view
<!-- detail.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>
scroll-view 属性设置：
scroll-y="true" 允许Y轴滚动;
scroll-into-view="{{ detail }}" 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素;
scroll-with-animation="true" 在设置滚动条位置时使用动画过渡
注意： scroll-view 一定要设置 height: 的值 （px / rpx），否则无效
detail.js
Page({ 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 }) }, })
请发表评论