uni-app x开发商城系统，资讯列表跳转详情并传递id

一、概述

上一篇文章，已经实现了资讯列表结构，数据渲染，news-item组件封装。

接下来，实现资讯列表跳转详情并传递id

效果如下：

 

二、资讯详情页面

资讯详情页面，先简单写一下，显示id即可

新建文件 pages/news/news-detail.uvue，完整内容如下：

<template><view>资讯详情{{id}}</view>
</template><script>export default {data() {return {id: ''}},//页面加载拿到传递来的参数id值
        onLoad(value) {this.id = value.id;console.log("onload拿到id", value);},methods: {}}
</script><style></style>

 

修改项目跟目录的pages.json，增加路由

{"path": "pages/news/news-detail","style": {"navigationBarTitleText": "资讯详情","enablePullDownRefresh": false}
},

编译运行，效果如下：

目前还看不到id，需要子组件news-item传递

三、news-item组件传递id

修改 components/news-item/news-item.uvue文件，增加点击事件navigator

完整代码如下：

<template><view><view class="news_item" v-for="(item,index) in newsList" :key="item.id" @click="navigator(item.id)"><image :src="item.img_url"></image><view class="right"><view class="title">{{item.title}}</view><view class="info"><text>发表时间：{{cut_data(item.add_time)}}</text><text>浏览: {{item.click}}</text></view></view></view></view>
</template><script>export default {//接收父组件传递的值props: ['newsList'],methods: {// 截取日期
            cut_data(time_str) {const date = time_str.split('T')[0];return date;},navigator(id) {//调用父组件的方法 传递idthis.$emit("goNewsDetailPage", id)},}}
</script><style lang="scss">.news_item {display: flex;padding: 10rpx 20rpx;border-bottom: 1px solid $shop-color;// 子元素自动水平排列flex-direction: row;image {width: 200rpx;height: 150rpx;min-width: 200rpx;max-width: 200rpx;}.right {// 占满剩余宽度flex: 1;margin-left: 15rpx;// 与图片同高
            height: 150rpx;display: flex;// 弹性布局 侧轴显示flex-direction: column;// 两边对齐justify-content: space-between;.title {font-size: 30rpx;}.info {display: flex;flex-direction: row;text {font-size: 24rpx;}text:nth-child(2) {margin-left: 40rpx;}}}}
</style>

四、资讯页面跳转详情id

资讯页面，点击每一条资讯时，需要传递id给资讯详情页面

修改 pages/news/news.uvue文件，触发事件goNewsDetailPage

完整代码如下：

<template><view><!-- 资讯 --><view class="news"><news-item :newsList="newsList" @goNewsDetailPage="goNewsDetailPage"></news-item></view></view>
</template><script>import newsPageDataList from '../../components/news-item/news-item.uvue'export default {components: {"news-item": newsPageDataList},data() {return {newsList: []}},onLoad() {this.getNews()},methods: {async getNews() {const res = await this.$http.get('/api/getnewslist', {})this.newsList = res.message;console.log("资讯数据", this.newsList);},//跳转到资讯详情页，拿到子组件传递的idgoNewsDetailPage(id) {console.log("跳转资讯详情页id", id);uni.navigateTo({url: './news-detail?id=' + id})}}}
</script><style lang="scss">.news {}
</style>

编译代码，效果如下：