需在实现列表的基础上开发
【微信小程序-原生开发】实用教程15 - 列表的排序、搜索（含云数据库常用查询条件的使用方法，t-search 组件的使用）_朝阳39的博客-CSDN博客
https://sunshinehu.blog.csdn.net/article/details/129356909
效果预览
技术要点
详情的获取有两种方式：
方式一：通过 id 获取详情
优点：可以确保每次打开详情都是最新的内容
缺点：需要访问详情接口，会消耗调用次数和客户流量
以查看成员详情为例
<t-cell url="{{'/pages/components/friend/detail/index?id='+item.memberID}}" align='top' leftIcon="user-add" wx:if="{{item.type === 3}}" title="{{'热烈欢迎 '+item.publisher+' 加入DOS圆梦大家庭！'}}" />
- t-cell 组件的 url 属性可以直接实现页面跳转，效果同 wx.navigateTo
当然，也可以绑定点击事件，触发页面跳转
bindtap="gotoDetail" data-detail="{{item}}"
gotoDetail(e) { let memberID = e.currentTarget.dataset.detail._id wx.navigateTo({ url: '/pages/components/friend/detail/index?id='+ memberID }) }
以上为在目标页面路径后添加参数的方式，实现页面传参，仅适用于参数内容少，且为字符串等基础数据类型的参数。（若是对象等复杂类型则不适合此种方式的页面传参）
详情页接收参数并查询详情
在页面生命周期 onLoad 方法中，接收来自上个页面通过页面路径传来的参数
onLoad(options) { // 通过id获取详情 let id = options.id if (id) { this.setData({ id: id }) this.getDetail() return } }
getDetail() { let that = this that.setData({ show: false }) wx.showLoading({ title: '加载中', }) db.doc(this.data.id).get().then(res => { that.setData({ detail: res.data, show: true }) wx.hideLoading() }).catch(() => { that.setData({ show: true }) wx.hideLoading() }) },
方式二：直接从列表传递详情
优点：无需访问接口，可节省调用次数和客户流量
缺点：查看的内容为获取当前列表时得到的详情内容，可能已不是最新的数据内容。
当页面跳转需传递复杂参数（如对象）时，则需采用以下方式
gotoDetail(e) { let detail = e.currentTarget.dataset.detail wx.navigateTo({ url: '/pages/components/friend/detail/index', success: function (res) { res.eventChannel.emit('sendData', { data: detail }) } }) }
详情页接收此种参数的方法如下：
onLoad() { let that = this // 接收列表页传入的复杂数据--对象（详情） const eventChannel = this.getOpenerEventChannel() eventChannel.on('sendData', function (res) { that.setData({ id: res.data._id, detail: res.data, show: true }) }) },
