1,创建reply回复页面
1.1 在comment-item子组件中添加click
<view class="comment-item" @click="goReply">
1.2 methods中添加点击跳转回复页面的方法
//跳转去回复页面
goReply() {
uni.navigateTo({
url: "/pages/reply/reply"
})
},
1.3 阻止事件冒泡 .stop跳转到回复页面
在comment-item中,删除评论按钮的click中加入.stop来阻止事件冒泡:
<text class="iconfont icon-a-43-guanbi" @click.stop="delComment"></text>
2,reply页面完善
<template>
<view class="reply">
<view class="top">
<comment-item></comment-item>
</view>
<view class="list">
<view class="row" v-for="item in 3">
<comment-item></comment-item>
</view>
</view>
<view>
<comment-frame>
</comment-frame>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style lang="scss">
.reply {
.top {
padding: 30rpx;
border-bottom: 15rpx solid #eee;
}
.list {
padding: 30rpx;
padding-bottom: 120rpx;
.row {
padding-bottom: 15rpx;
}
}
}
</style>
3,介绍3种不同类型的页面跳转传参方式
3.1 通过url传递id到新页面,然后在新页面中通过接收i到的id发送网络请求查询数据库
3.2 通过url传递整个所需对象,需要用JSON.stringify()和JSON.parse()
3.3 通过本地缓存来实现两个页面之间的数据交互
本项目采用第三种方式:
在comment-item中
uni.setStorageSync("replyItem", this.item)
在reply页面中:
onLoad(e) {
let replyItem = uni.getStorageSync("replyItem");
if (!replyItem) return uni.navigateBack();
this.replyItem = replyItem || {}
},
onUnload() {
uni.removeStorageSync("replyItem")
},