uniapp 点击按钮跳转坐标
时间: 2025-01-22 09:13:21 浏览: 34
### 实现点击按钮时携带坐标参数进行页面跳转
在 UniApp 中,可以通过 URL 携带参数的方式,在跳转页面时将坐标参数传递给目标页面。具体做法是在导航方法中构建带有查询字符串的 URL,并使用 `uni.navigateTo` 方法执行页面跳转[^1]。
当需要传递坐标参数(例如经度 longitude 和纬度 latitude),可以在源页面定义一个按钮点击事件处理函数来设置这些参数并触发页面跳转:
```javascript
methods: {
gotoDetailPage() {
const longitude = 116.4074;
const latitude = 39.9042;
uni.navigateTo({
url: `/pages/detail/detail?longitude=${longitude}&latitude=${latitude}`
});
}
}
```
上述代码片段展示了如何创建一个名为 `gotoDetailPage` 的方法,该方法会在调用时向指定的目标页面传递两个坐标参数:`longitude` 和 `latitude`。
为了读取传入的目标页面中的参数,可以在目标页面生命周期钩子内访问 `this.$route.query` 对象从而获取所需的数据:
```javascript
export default {
onLoad(options) {
console.log('Longitude:', options.longitude);
console.log('Latitude:', options.latitude);
// 进一步逻辑...
}
};
```
此段脚本说明了怎样利用 `onLoad` 钩子接收来自上一页面传递过来的位置信息,并将其打印出来以便后续操作。
阅读全文
相关推荐














