一、需求:
uniapp实现点击A页面按钮,跳转到B页面的指定位置
二、实现方法
第一种方式:
必须必须要注意!
scroll-into-view 即使是测试也不可写死(组件布局完成后,动态的改变这个scroll-into-view的值,才会跳到索引位置)
scroll-y=“true”& 固定高度
A页面
<button bindtap='clickBtn'>跳转</button> clickBtn: function(){ uni.navigateTo({ url: '../b/b?viewId=view4' // 参数viewId=定位的位置id }) }
B.页面
<scroll-view scroll-into-view="{{toView}}" style='height:100%;' scroll-y="true" class="scr"> <view id='view1' style='200px;'> <text>My is View1</text> </view> <view id='view2' style='200px;'> <text>My is View2</text> </view> <view id='view3' style='200px;'> <text>My is View3</text> </view> <view id='view4' style='200px;'> <text>My is View4</text> </view> <view id='view5' style='200px;'> <text>My is View5</text> </view> </scroll-view> Page({ data: { toView:'' // 配置默认显示view }, onLoad: function (options) { var id = options.viewId // 定位view的id this.setData({ toView:'id' }) } })
第二种方式:
在A页面的按钮点击事件中,通过uni.navigateTo方法跳转到B页面,并通过URL参数传递分类信息。
// A页面按钮点击事件
navigateToBPage(category) { uni.navigateTo({ url: '/pages/BPage/BPage?category=' + category }); }
在B页面的onLoad生命周期中,通过this.$route.query获取URL参数,并根据参数值进行分类显示
// B页面的onLoad生命周期
onLoad() { // 获取URL参数中的category值 const category = this.$route.query.category; // 根据category值进行分类显示 if (category === 'category1') { // 根据分类1显示内容 this.showCategory1Content(); } else if (category === 'category2') { // 根据分类2显示内容 this.showCategory2Content(); } else { // 默认处理... this.handleDefault(); } }, methods: { showCategory1Content() { // 根据分类1显示内容的逻辑 }, showCategory2Content() { // 根据分类2显示内容的逻辑 }, handleDefault() { // 默认处理的逻辑 } }
第三种方式:
可以使用uni.navigateTo方法跳转到B页面,并在B页面的onReady生命周期中使用uni.pageScrollTo方法滚动到指定的view位置
在A页面的按钮点击事件中:
// A页面按钮点击事件 navigateToBPage() { uni.navigateTo({ url: '/pages/BPage/BPage' }); }
在B页面的onReady生命周期中:
// B页面的onReady生命周期 onReady() { // 使用setTimeout延迟执行,确保DOM渲染完成 setTimeout(() => { // 获取目标view的选择器 const selector = '#targetView'; // 使用uni.pageScrollTo方法滚动到目标view位置 uni.pageScrollTo({ selector, duration: 300 }); }, 2000); }