明明传了对象，接收端却是 undefined；刷新页面参数直接消失...试了这 3 种方法，再也没出过问题！
✅ 方法 1：URL 传参（简单值首选）
适合传字符串、数字这类简单数据，直接拼在跳转路径后面
javascript
运行
javascript
// 跳转页传参
uni.navigateTo({
url: `/pages/detail/detail?id=1&name=测试`
});
// 接收页取值（onLoad 生命周期里）
onLoad(options) {
console.log(options.id); // 1
console.log(options.name); // 测试
}⚠️ 注意：传对象会自动转字符串，复杂数据别用这个！
✅ 方法 2：全局变量传参（复杂数据首选）
在 App.vue 里定义全局变量，适合传对象、数组
javascript
运行
scss
// App.vue 定义
export default {
globalData: {
userInfo: {}
}
}
// 跳转页存数据
getApp().globalData.userInfo = { id: 1, name: "测试" };
uni.navigateTo({ url: `/pages/detail/detail` });
// 接收页取数据
onLoad() {
const user = getApp().globalData.userInfo;
console.log(user); // 完整对象
}✅ 方法 3：本地存储传参（跨页面持久化）
需要数据持久化（比如重启 APP 还在）就用这个，存到本地缓存里
javascript
运行
javascript
// 跳转页存数据
uni.setStorageSync("orderData", { id: 1, price: 99 });
uni.switchTab({ url: `/pages/order/order` });
// 接收页取数据
onShow() {
const order = uni.getStorageSync("orderData");
console.log(order);
// 用完可以删掉，避免占用缓存
uni.removeStorageSync("orderData");
}💡 避坑提醒：
- URL 传参别传复杂对象，会被截断！
- 全局变量页面卸载不会消失，记得及时清空！
- 本地存储存多了占空间，用完就删！
#uni-app 开发 #前端技巧 #页面传参
2. 标题：uni-app 实现下拉刷新 + 上拉加载，复制就能用！
做列表页必备的下拉刷新 + 上拉加载，其实超简单！不用装插件，原生 API 两步搞定，兼容所有端！
📝 步骤 1：页面配置开启功能
在对应页面的 pages.json 里加配置，允许下拉刷新和上拉加载
json
json
{
"path": "pages/list/list",
"style": {
"enablePullDownRefresh": true, // 开启下拉刷新
"onReachBottomDistance": 50 // 距离底部50px触发上拉
}
}📝 步骤 2：写逻辑代码
在页面的 script 里写两个生命周期函数，处理刷新和加载逻辑
javascript
运行
kotlin
export default {
data() {
return {
list: [], // 列表数据
page: 1, // 当前页码
pageSize: 10, // 每页条数
hasMore: true // 是否还有更多数据
};
},
onLoad() {
// 页面加载时获取第一页数据
this.getListData();
},
// 下拉刷新触发
onPullDownRefresh() {
// 重置页码和状态
this.page = 1;
this.hasMore = true;
// 重新请求数据
this.getListData(() => {
// 停止下拉刷新动画
uni.stopPullDownRefresh();
});
},
// 上拉加载触发
onReachBottom() {
// 没有更多数据就直接返回
if (!this.hasMore) return;
// 页码+1
this.page++;
this.getListData();
},
methods: {
// 获取列表数据
getListData(callback) {
// 模拟请求接口，实际换成你的接口地址
uni.request({
url: "https://xxx.com/api/list",
data: {
page: this.page,
pageSize: this.pageSize
},
success: (res) => {
const data = res.data.data;
if (this.page === 1) {
// 第一页直接覆盖数据
this.list = data;
} else {
// 非第一页追加数据
this.list = [...this.list, ...data];
}
// 没有更多数据了
if (data.length < this.pageSize) {
this.hasMore = false;
}
// 执行回调（停止下拉刷新）
callback && callback();
}
});
}
}
};✨ 优化体验：加加载提示
javascript
运行
php
// 请求数据时显示加载中
uni.showLoading({ title: "加载中..." });
// 请求成功后隐藏
uni.hideLoading();
// 没有更多数据时提示
if (!this.hasMore) {
uni.showToast({
title: "没有更多数据了",
icon: "none"
});
}💡 核心要点：
- 下拉刷新要重置页码，重新请求第一页！
- 上拉加载要判断是否还有更多数据，避免重复请求！
- 记得停止下拉刷新动画，不然会一直转！
#uni-app 教程 #列表分页 #下拉刷新
3. 标题：uni-app 图片预览 + 长按保存，超实用！
做项目时用户总说图片不能保存？一行代码实现图片预览，长按还能保存到相册，安排！
🎯 实现代码
html
预览
xml
<!-- template 里写图片列表 -->
<view class="img-list">
<image
v-for="(item, index) in imgList"
:key="index"
:src="item"
class="img-item"
@click="previewImg(index)"
></image>
</view>javascript
运行
javascript
export default {
data() {
return {
// 图片列表，换成你的图片地址
imgList: [
"https://xxx.com/img1.jpg",
"https://xxx.com/img2.jpg",
"https://xxx.com/img3.jpg"
]
};
},
methods: {
// 预览图片
previewImg(current) {
uni.previewImage({
current: current, // 当前点击的图片索引
urls: this.imgList, // 所有要预览的图片列表
longPressActions: {
// 长按显示的操作菜单
itemList: ["保存图片", "分享图片"],
success: (res) => {
if (res.tapIndex === 0) {
// 点击保存图片
this.saveImg(this.imgList[current]);
}
}
}
});
},
// 保存图片到相册
saveImg(imgUrl) {
uni.saveImageToPhotosAlbum({
filePath: imgUrl,
success: () => {
uni.showToast({
title: "保存成功",
icon: "success"
});
},
fail: (err) => {
// 用户拒绝授权时提示
if (err.errMsg.includes("auth deny")) {
uni.showToast({
title: "请开启保存图片权限",
icon: "none"
});
}
}
});
}
}
};🎨 加个简单样式
css
css
.img-list {
display: flex;
flex-wrap: wrap;
gap: 10rpx;
padding: 20rpx;
}
.img-item {
width: 30%;
height: 200rpx;
border-radius: 8rpx;
}💡 权限提醒：保存图片需要用户授权，第一次点击会弹出授权提示，记得引导用户允许！