一、需求:
uniapp实现点击A页面按钮,跳转到B页面的指定位置
二、实现方法
第一种方式:
必须必须要注意!
scroll-into-view 即使是测试也不可写死(组件布局完成后,动态的改变这个scroll-into-view的值,才会跳到索引位置)
scroll-y=“true”& 固定高度
A页面
clickBtn: function(){ uni.navigateTo({ url: '../b/b?viewId=view4' // 参数viewId=定位的位置id }) }
B.页面
Page({ data: { toView:'' // 配置默认显示view }, onLoad: function (options) { var id = options.viewId // 定位view的id this.setData({ toView:'id' }) } }) My is View1 My is View2 My is View3 My is View4 My is View5
第二种方式:
在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); }
猜你喜欢
- 14天前(兰州旅游文化产业发展有限公司)甘肃省兰州市2023年乡村旅游暨A级旅游景区管理工作培训班开班
- 14天前(fender japan hybrid)Fender东京旗舰店盛大开幕在即,开售商品和店内服务提前揭晓
- 14天前(万达酒店及度假村连续五年荣获“中国饭店集团60强”)万达酒店及度假村连续五年荣获“中国饭店集团60强”
- 14天前(中旅酒店 维景)中旅酒店首次AI数字人直播亮相南京维景
- 14天前(艾美酒店连锁)艾美酒店全球夏日计划回归,联手Wishbone主厨推出创新冰饮
- 14天前(甘肃文旅项目)甘肃省文旅产业链招商引资推介会在天水成功举办
- 14天前(云南南博会展馆)旅居云南馆亮相第9届南博会
- 14天前(札幌小樽市)2024年暑期飞往北海道避暑吧!札幌小樽city walk路线推荐
- 14天前(澳涞山庄见证北欧零碳到中国实践,世界十佳环境保护城市榜单发布)澳涞山庄见证北欧零碳到中国实践,世界十佳环境保护城市榜单发布
- 14天前(殷建祥简历)全国十大牛商解码:殷建祥如何用178天技术突围打造星空梦星空房
网友评论
- 搜索
- 最新文章
- (2020广州车展哈弗)你的猛龙 独一无二 哈弗猛龙广州车展闪耀登场
- (哈弗新能源suv2019款)智能科技颠覆出行体验 哈弗重塑新能源越野SUV价值认知
- (2021款全新哈弗h5自动四驱报价)新哈弗H5再赴保障之旅,无惧冰雪护航哈弗全民电四驱挑战赛
- (海南航空现况怎样)用一场直播找到市场扩张新渠道,海南航空做对了什么?
- (visa jcb 日本)优惠面面俱到 JCB信用卡邀您畅玩日本冰雪季
- (第三届“堡里有年味·回村过大年”民俗花灯会活动)第三届“堡里有年味·回村过大年”民俗花灯会活动
- (展示非遗魅力 长安启源助力铜梁龙舞出征)展示非遗魅力 长安启源助力铜梁龙舞出征
- (阿斯塔纳航空公司)阿斯塔纳航空机队飞机数量增至50架
- (北京香港航班动态查询)香港快运航空北京大兴新航线今日首航
- (我在港航“呵护”飞机 每一次安全着陆就是最好的荣誉)我在港航“呵护”飞机 每一次安全着陆就是最好的荣誉
- 热门文章