Springboot+Uniapp从列表页面跳转到详情数据页面

参考链接：uni-app渲染新闻列表，跳转详情页 - 腾讯云开发者社区-腾讯云 (tencent.com)

文章目录

效果图

页面目录

列表页

详情页

步骤一：

完整代码

 步骤二：

完整代码

 总结：

---

效果图

页面目录

orgLife为列表页，details为详情页。

列表页

（用接口和后端连接数据，然后定义listData数组来存放数据，从而渲染页面）

详情页

（样式可以修改，目前只是暂时）

 

步骤一：

在列表页面添加一个点击方法（用于跳转到详情页面）（注意：使用如下方法的前提是列表页面数据已经渲染了，当你点击某个列表时，跳到的详情页面就会分析你所点击的是哪个列表）

2.在method方法那里添加上面设定的点击方法

（1）设定一个detail用于发送信息，将需要渲染在详情页面的变量放入进去

（2）用跳转功能直接传数据进入下面的路径中，记得用JSON将数据格式转化

（3）将上面设定的数组detail与该listData数组的数据连接在一起

完整代码

<template>
	<view>
		<view class="text">组织生活</view>
		<view v-for="(form, index) in listData" :key="index" class="view_tupian_wenzi" @click="goDetails(form)">
			<!-- 包裹两行文字 -->
			<view class="view_wenzi2">
				<text class="title">{{form.meetName}}</text>
				<text class="text_small">{{form.introduce}}</text>
				<text class="text_small">时间：{{form.startTime}}</text>
			</view>
		</view>
		<view class="bottom">---没有更多了---</view>
	</view>
</template>

<script>
    export default {
        data() {
            return {
				// 存储数据的列表
				listData: [],
            }
        },
		onLoad() {
			this.getList();
		},
        methods: {
			// 获取所有列表信息
			getList() {
				var _self = this;
				uni.request({
					url: 'info' + '/hygl/page',

					header: {
						'content-type': 'application/json',
					},
					success: (res) => {
						_self.listData = res.data.data.records;
						console.log(res.data.data.records);	
					}
				});
			},
			// 点击进入详情页面
			goDetails: function(e){
				// 设定一个数组用于发送信息
				let detail = {
					picUrl: e.picUrl,
					meetName:e.meetName,
					introduce: e.introduce,
					id: e.id,
					startTime: e.startTime
				};
				// 用跳转功能直接传数据进入下面的路径中，记得用JSON将数据格式转化
				uni.navigateTo({
					// 将上面设定的数组detail与该listData数组的数据连接在一起
					url: '/pages/orgLife/details/details?listData=' + encodeURIComponent(JSON.stringify(detail))
				})
			}
        }
    }
</script>
// style省略

 步骤二：

通过Uniapp中的onload方法将列表页点击后的数据渲染来详情页

打印数据在控制台，判断数据是否存在，然后用this.form接收数据，同样也是JSON转换数据格式，event.listData是列表页通过onload传递过来的数据（listData是列表页定义的数组）。

完整代码

<template>
    <view>
        <view class="banner">
            <image class="banner-img" :src="form.picUrl"></image>
            <view class="banner-title">{{form.meetName}}</view>
        </view>
        <view class="article-meta">
            <text class="article-author">{{form.introduce}}</text>
            <text class="article-text">发表于</text>
            <text class="article-time">{{form.startTime}}</text>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {}
        },
        onLoad(event) {
			// 打印数据在控制台，判断数据是否存在
            console.log(event);
			// 用this.form接收数据，同样也是JSON转换数据格式，event.listData是列表页通过onload传递过来的数据
			// listData是列表页定义的数组
            this.form = JSON.parse(decodeURIComponent(event.listData));
        },
        methods: {
        }
    }
</script>
// style省略

 总结：

总的来说，其实就是在列表页先通过getList方法获得数据的全部信息，然后再通过点击事件goDetail进行数据传送，然后在详情页通过onLoad将goDetail的传送数据返回回来渲染在详情页面上。

最后，本人对Uniapp的开发知识也只是停留在初始学习阶段，很多地方可能解释的不是那么的标准，我只能按照我自己的理解来进行解释，也是为了以后自己遇到问题能进行回顾。样式可以自己修改，不一定用我这种方式，我只是比较懒不行换个好看的（毕竟只是学习用）。