学习Uni-app开发小程序Day24

最新推荐文章于 2024-08-31 00:13:32 发布

原创

最新推荐文章于 2024-08-31 00:13:32 发布 · 1.5k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #uni-app #小程序

这一章节是要将从首页的点击进入子组件，然后展示对应的数据。这里涉及到页面传递参数、将获取的数据渲染到页面上

给组件通过defineProps声明变量传值渲染

因为使用的是子组件，那就需要再父组件中点击后，给子组件传递参数，根据参数得到对应的数据并渲染到页面上。效果图：
在这里插入图片描述
在初始进入页面时，就要获取这里的数据，数据包含了图片缩略图、时间、图片类型。

	// 获取专题精选的图片地址
	const classifyList=ref([])
	const getClassify = async () => {
		let res=await apiGetClassify({pageSize:8});
		classifyList.value=res.data
	}
	getClassify();

先要获取数据，这是获取数据的方法，上一章已经学习了将网络请求进行封装，这里直接调用接口就可以了，获取到数据后，那要怎么给子组件传递参数？这就需要使用defineProps声明变量后，在从父组件传递数据过去。
子组件声明变量：

defineProps({
		isMore: {
			type: Boolean,
			default: false
		},
		item: { //数据源
			type: Object, //类型，因为是传对象，这里使用Object
			default () { //这里定义对象的参数
				return {
					name: "默认名称",
					picurl: "../../common/images/classify1.jpg",
					updateTime: Date.now() - 1000 * 60 * 60 * 5
				}
			}
		}
	})

子组件定义了对象接收的参数，那父组件要怎么传递呢？
在这里插入图片描述
直接使用子组件定义的对象名后，这里就使用:item=“item”，将需要的数据传递过去。
子组件接收到数据后，直接使用定义的对象名将数据渲染到页面上

这里圈出的是什么？查看数据源，发现服务器给的是一时间戳，那如何将时间戳更改成效果图的形式？例如：大于1分钟小于1小时的时候，页面显示的是多少分钟前发布的。这种情况要如何编写？这里就要说下ChatGPT强大了，可以直接使用AI编写，将编写的js放在公共模块下，这里就可以直接使用了，下面把AI写的js贴出来

export function timeDifference(timestamp) {
    const now = new Date().getTime();
    const difference = now - timestamp;

    const minute = 60 * 1000;
    const hour = 60 * minute;
    const day = 24 * hour;
    const month = 30 * day;

    if (difference < minute) {
        return '1分钟';
    } else if (difference < hour) {
        return Math.floor(difference / minute) + '分钟';
    } else if (difference < day) {
        return Math.floor(difference / hour) + '小时';
    } else if (difference < month) {
        return Math.floor(difference / day) + '天';
    } else if (difference < 3 * month) {
        return Math.floor(difference / month) + '月';
    } else {
        return null;
    }
}


export function gotoHome(){
	uni.showModal({
		title:"提示",
		content:"页面有误将返回首页",
		showCancel:false,
		success: (res) => {
			if(res.confirm){
				uni.reLaunch({
					url:"/pages/index/index"
				})
			}
		}
	})
}

当AI给出的是当前页面的方法，我们把这个放在公共区域，那就需要把该方法暴露出去，其他地方才能使用，在方法前面添加 export就好