用Uniapp开发鸿蒙项目六

一、写在前面

接着之前的学习，今天要给项目拓展两个实用功能：给列表加上点击跳转到详情页的交互，以及实现简单表单。在实际 App 开发里，列表点击查看详情、用户填写信息提交表单这些场景太常见啦，把它们加到咱们的学习项目中，能让项目更贴近真实应用。继续基于现有的 demo1 项目折腾，记录学习过程。

二、给列表添加点击跳转详情页功能

（一）需求与准备

在 user 页面的列表里，点击某一项，跳转到对应的详情页，展示该条数据的详细内容。首先得新建一个详情页，用来承载具体信息。

（二）新建详情页

在 HBuilderX 中，右键点击 pages 目录，选择新建页面，命名为 detail ，选择空页面模板，创建好后，pages.json 会自动添加该页面的路由配置。

（三）修改列表代码实现跳转

通过测试，发现uni-ui目前并不支持鸿蒙：

所以经过看官方文档，发现可以用以下方式实现列表功能，并实现带着数据进行跳转的功能：

<template>
  <view class="user-container">
    <!-- List 列表 -->
	<div>
		<div class="item" v-for="item  in  listData" :key="item.id">
			<text class="td">{{item.title}}</text>
			<text class="td">{{item.desc}}</text>
			<button @click="goToDetail(item)" class="td">点击跳转</button>
           <navigator :url="'/pages/detail/detail?item='+ JSON.stringify(item)" hover-class="navigator-hover" class="td">
				  <button type="default">跳转</button>
			</navigator>
		
		</div>
			
	</div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        { title: "文章 1", desc: "这是一篇超有趣的文章" },
        { title: "文章 2", desc: "鸿蒙开发小技巧" },
        { title: "文章 3", desc: "Uniapp 实战总结" }
      ]
    };
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
	
    goToDetail(item) {
		console.log("跳转")
      uni.navigateTo({
        url: '/pages/detail/detail?item=' + JSON.stringify(item)
      });
    }
  }
};
</script>

<style lang="scss">
	.item{
		display: flex;
		flex-direction: row;
		.td{
			flex: 1;
		}
	}
</style>

（四）详情页接收并展示数据

打开 pages/detail/detail.uvue，编写代码：

<template>
  <view class="detail-container">
    <text class="title">{{ item.title }}</text>
    <text class="desc">{{ item.desc }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      item: {}
    };
  },
  onLoad(options) {
    const itemStr = options.item;
    this.item = JSON.parse(itemStr);
  }
};
</script>

<style>
.detail-container {
  padding: 20rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.desc {
  font-size: 28rpx;
  color: #666;
}
</style>

在 onLoad 生命周期里，接收传递过来的参数，再用 JSON.parse 转成对象，然后在页面上展示标题和描述。这样点击列表项就能跳转到详情页查看具体内容啦。