uni-app资讯列表如何跳转详情并传递ID？
摘要：一、概述 上一篇文章，已经实现了资讯列表结构，数据渲染，news-item组件封装。 接下来，实现资讯列表跳转详情并传递id 效果如下： 二、资讯详情页面 资讯详情页面，先简单写一下，显示id即可 新建文件 pag
一、概述
上一篇文章，已经实现了资讯列表结构，数据渲染，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) {
//调用父组件的方法 传递id
this.$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);
},
//跳转到资讯详情页，拿到子组件传递的id
goNewsDetailPage(id) {
console.log("跳转资讯详情页id", id);
uni.navigateTo({
url: './news-detail?id=' + id
})
}
}
}
</script>
<style lang="scss">
.news {}
</style>
编译代码，效果如下：