#前端# 点击列表页跳转到对应的详情页（获取上一页的参数/id）

#前端#

点击列表页跳转到对应的详情页（获取上一页的参数/id）

示例：

从列表页跳转到详情页

效果图：

思路：

在列表项页面：

（1）首先通过后端接口数据，将列表页的内容进行循环渲染出来

（2）再通过绑定点击事件getDetail()，在事件里面传入id实参（就是后端返回的数据id）

示例：

<view v-for="(item, index) in reportList"  @click="toDetail(item.id)" >

（3）再在method里面的getDetail()里面，用一个形参来接收实参 

	methods: {
			
			toDetail(id) {
				
			}
		},

这个时候getDetail（id）就已经接收到后端返回的数据了

（4）然后把id带上，跳转到详情页

携带id的格式是：'../rick/rick? id='+id （这个格式里面，不能存在空格）

相当于：http://137..20.1:8081/system/poseport/709

toDetail(id) {
                uni.navigateTo({
                    url:'./risk/risk?id='+id
                })
            }

在详情页页面：

（1）在onload()里面传入一个option （与data同级）

( // option为object类型，会序列化上个页面传递的参数 )

data() {
		return {	
			}
		},
onLoad(option) {
	  
		}

（2）然后就在事件里面（getRisklist（）这个事件，

就是渲染出详情页页面内容的事件，自定义的），拿到上一个页面的id ：option.id

onLoad(option) {
	   this.getRisklist(option.id)
		}

（3）将option.id（实参）传递给到method里面的事件 getRisklist(id) （形参）

methods: {
			//获取各项风险详情
			getRisklist(id) {
				this.$ajax.get("/system/posturortdata/"+id)
					.then(res => {
						if (res.code == 200) {
							
						}
					})
			}
		}

（4）再在接口地址加上id（就是把刚刚拿到的id），然后再将后端接口数据，通过变量进行接收

地址接口加id格式 （也是一样，不能有任何空格）

("/system/posturtdata/"+id)

<script>
	export default {
		data() {
			return {
				baseUrl: this.$ajax.baseURL,
				list: [],
				bodyImg: '',
				rickImg: '',
				video: '',
				symptomName: '',
				num: ''
			}
		},
		onLoad(option) {
			this.getRisklist(option.id)
		},
		methods: {
			//获取各项风险详情
			getRisklist(id) {
				this.$ajax.get("/system/posturertdata/"+id)
					.then(res => {
						if (res.code == 200) {
							this.bodyImg = res.data.roleCutPhoto;
							this.rickImg = res.data.symptomPhoto;
							this.video = res.data.symptomVideo;
							this.symptomName = res.data.roleSymptomName;
							this.num = res.data.roleSymptomValue;
							this.list = res.data.postureRiskList
						}
					})
			}
		}
	}
</script>

（5）然后在标签里面进行渲染就可以了

<template>
	<view>
		<view class="header">
			<view class="item-left">
				<image :src="baseUrl + bodyImg"></image>
				<view class="title">{{symptomName}}</view>
			</view>
			<view class="item-right">
				<image :src="baseUrl + rickImg"></image>
				<view class="item-type">
					<view class="item-type-nums" :style="{'margin-left':num + '%' }">{{num}}</view>
					<view class="item-type-bg">
						<image src="@/static/health/line.png"></image>
						<view class="line-round" :style="{'left':num + '%' }"></view>
					</view>
					<view class="item-line-tip">
						<span>低</span>
						<span>中</span>
						<span>高</span>
					</view>
				</view>
			</view>
		</view>
		<view class="symptom">
			<image src="@/static/health/tt.png"></image>
			<view class="tips">症状解读</view>
		</view>
		<view class="item-video">
			<video :src="baseUrl +video" controls="true"></video>
		</view>
		<view class="symptom">
			<image src="@/static/health/tt.png"></image>
			<view class="tips">引发症状</view>
		</view>
		<view class="trigger" v-for="item in list">
			<view class="item">
				<view class="title">{{item.riskName}}</view>
				<view class="tip">{{item.riskDescribe}}</view>
			</view>
		</view>
	</view>
</template>