uniappv-for循环的数据连接到下一个页面上并显示对应的index数据,显示详细代码
时间: 2023-04-07 19:01:55 浏览: 149
分页显示,有上一页,下一页的代码
4星 · 用户满意度95%
我可以回答这个问题。在uniapp中,可以使用uni.navigateTo()方法将数据传递到下一个页面,并在下一个页面中使用onLoad()方法获取传递的数据。具体代码如下:
在当前页面中:
<template>
<view>
<view v-for="(item, index) in dataList" :key="index" @click="goToDetail(index)">
{{ item.title }}
</view>
</view>
</template>
<script>
export default {
data() {
return {
dataList: [
{ title: '数据1', content: '内容1' },
{ title: '数据2', content: '内容2' },
{ title: '数据3', content: '内容3' }
]
}
},
methods: {
goToDetail(index) {
uni.navigateTo({
url: '/pages/detail/detail?index=' + index
})
}
}
}
</script>
在下一个页面中:
<template>
<view>
<view>{{ data.title }}</view>
<view>{{ data.content }}</view>
</view>
</template>
<script>
export default {
data() {
return {
data: {}
}
},
onLoad(options) {
const index = options.index
const dataList = [
{ title: '数据1', content: '内容1' },
{ title: '数据2', content: '内容2' },
{ title: '数据3', content: '内容3' }
]
this.data = dataList[index]
}
}
</script>
这样就可以将当前页面中的数据传递到下一个页面,并在下一个页面中显示对应的数据了。
阅读全文