uni-app 列表和详情-简单项目示例
最新回答
逸迢弦语
2025-03-30 04:21:36
新建项目 uni-app Hello uni-app 模板
将 Hello uni-app 模板内 static/uni.tff 和 common/uni.css 拷贝到 默认模板项目的对应目录
全局引入 uni.css
App.vue
新建 info 页面
pages/index/inde 列表页
pages/info/info 详情页
列表页定义数据
首先考虑页面需要的后台数据
这里是 news ，数组类型
请求数据
请求接口 unidemo.dcloud.net.cn/a...
返回的res.data 是需要的数据
自定义代码块
官方教程使用了 uListMedia 代码块，这个是自定义的，查看
页面展示
这里 news 数据里面需要展示 cover title created_at
点击事件
详情页需要根据点击项传来的数据显示不同的内容，这里传递的数据是 post_id
首先组件动态绑定 data-newsid 并赋值为 post_id 的值，数据会发送给事件处理函数openinfo
这样会在事件的 event.currentTarget.dataset 上添加newsid 属性
然后就可以在 uni.navigateTo 方法的 url 参数中使用该属性并传递给 info 页面使用
info页面可以在 onLoad 生命周期中使用 option 或者 event 获取上个页面传递的参数
点击对应项跳转到详情页可以使用 navigator 组件，也可以定义方法，方法内使用 uni.navigateTo data-* 属性和微信小程序原生开发有些区别 uniapp 是需要动态绑定即前面加冒号 ： 微信小程序不需要加
pages/info/info.vue
详情页查看传递来的数据
请求数据
请求接口 unidemo.dcloud.net.cn/a...
其中 xxx 是上个页面传递来的数据，也就是 option.newsid
页面展示
上面请求的数据页面需要展示 title 和 content，定义数据 title 和 content
其中 content 是 html 字符串，可以使用 rich-text 展示
优化体验
列表页和详情页因为数据多，可能出现加载过慢的情况，这时最好给用户提示
可以使用 uni.showLoading 显示 loading 提示框
pages/index/index.vue
pages/info/info.vue
云开发初始化
右键项目 创建 uniCloud 云开发环境，关联云开发空间 ，打开 uniCloud web 控制台
数据表
在 uniCloud web 控制台新建 news 数据表
因为后端数据可能比较多，以下为了简化，先创建需要在前端展示的数据
有 user_id post_id title content cover created_at
并且 user_id 需关联 users 表
在 uniCloud web 控制台新建 user 表
users 表结构
新增 user
news 表结构
新增 news
Schema2Code
回到HBuilderX，右键下载DB Schema
右键 news.schema.json，选择schema2code，选择前端页面，字段按需要
注册页面
page.json 只保留 pages/news/list 和 pages/news/detail 页面，其它页面注释掉
生成的 pages/news/list.vue
生成的 pages/news/detail.vue
生成的list.vue 文件已经做好了跳转链接，并且传递给 detail 页面的数据是 id: item_id
detail 页面接收到 id 赋值给 this._id，并通过 unicloud-db 组件的 where 属性指定查询的条件，获取相应的数据
pages/news/list.vue 中修改 里的元素
pages/news/detail.vue 中修改 里的元素
热门标签
