方法一:列表渲染的情况下:通过json.stringify将数组转化成对象
<template>
<view>
<view v-for="(item,index) in box" :key="index" class="box" @click="viper(index)">
<view class="box1">{{item.name}}</view>
<view class="box1">{{item.sex}}</view>
<view class="box1">{{item.num}}</view>
<view class="box1">{{item.score}}</view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
box:[
{
name:'1',
sex:'男',
num:'12',
score:'90'
},
{
name:'2',
sex:'男',
num:'12',
score:'91'
},
{
name:'3',
sex:'女',
num:'12',
score:'92'
},
{
name:'4',
sex:'男',
num:'15',
score:'99'
},
]
}
},
methods:{
viper(index){
uni.navigateTo({
url:'/pages/将页面的数据传输到另外一个页面/B页面?box=' + JSON.stringify(this.box[index])
})
console.log(this.box[index])
}
}
}
</script>
<style>
.box{
width: 100%;
height: 350rpx;
background-color: aqua;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box1{
width: 100rpx;
height: 100rpx;
}
</style>
B页面:通过json.parse来获取对象
<template>
<view>
<view v-for="(item,index) in boxs" :key="index" class="box" >
<view class="box1">{{boxs.name}}</view>
<view class="box1">{{boxs.num}}</view>
<view class="box1">{{boxs.sex}}</view>
<view class="box1">{{boxs.score}}</view>
</view>
</view>
</template>
<script>
export default{
data(){
return{
boxs:[
],
}
},
onLoad(option) {
this.boxs = JSON.parse(option.box)
console.log('this.boxs', this.boxs)
},
methods:{
}
}
</script>
<style>
.box{
width: 100%;
height: 350rpx;
background-color: aqua;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.box1{
width: 100rpx;
height: 100rpx;
background-color: beige;
}
</style>