小程序云开发实战七：云开发首页列表跳转详情页
1：实战六之中，列表页已经完成，现在新建一个详情页，打开app.json,"pages/details/details",，自动生成了一个详情页
2：打开首页列表页代码，绑定详情按钮跳转事件 wxml:
<view wx:for="{{book_list}}">
<van-card num="2" price="{{item.price}}" desc="{{item.author}}" title="{{item.title}}" thumb="{{item.image }}">
<view slot="footer">
<van-button size="mini" bind:click="viewitem">详情按钮</van-button>
</view>
</van-card>
</view>
3:继续写js里面的绑定事件，在控制台打印一下event，方便后续测试
viewitem: function(event) {
console.log(event)
}
4：如何知道要跳转列表图书中的哪个详情页？要在云开发里面写一个特定的id，打开云开发控制台，数据库，需要用到这个下划线是_id的字段
5：给这个字段设置一个值，data-id="{{item._id}}"
图片.png
点击按钮，可以看到，点击不同的列表，打印的是不同的id，通过不同的id就可以看到不同的内容了。
6：下面实现点击详情按钮跳转详情页面，看到想要的具体的内容，看完控制台，因为具体数据是来自于event，currentTarget
所以js里面声明一下
var id = event.currentTarget.dataset.id;
并且写好跳转页面的跳转方法和url，带参数跳转
7：在detail.js的onLoad方法里面打印接收到的参数
8：测试,列表界面带参数跳转成功
分割线======分割线=======分割线=======分割线
开始写详情页的一些代码
1：初始化db的实例
const db = wx.cloud.database({});
2：打开云函数文档里面的读取数据apihttps://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/read.html 复制此段读取数据记录的代码，放在onload里面
onLoad: function (options) {
// console.log(options)
db.collection('books').doc(options.id).get({
success(res) {
// res.data 包含该记录的数据
console.log(res.data)
}
})
},可以看到，具体数据已经打印过来了
图片.png
这个时候还没有将数据传递到一个具体的页面实例中
所以，success开始改成使用箭头函数
// pages/details/details.js
const db = wx.cloud.database({});
Page({
/**
* 页面的初始数据
*/
data: {
},
onLoad: function (options) {
// console.log(options)
db.collection('books').doc(options.id).get({
success: res => {
console.log(res.data)
this.setData({
book: res.data
})
}
})
},
})ok，进入页面的时候，可以看到appdata里面的book
3:具体展示 在wxml里面写上想要拿到的数据，ok，详情页面展示的数据
4：效果如下
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019.01.03 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读