用户登录

现在订阅年付会员多送 6 个月,重订、续订多送 12 个月(最后 1 天)。订阅 →

在请求评论资源的成功回调里 .. 添加一个 comments .. 它的值是得到的内容的评论资源 .. 这些数据是在 response 里面的 data 属性里 ..

下面做一下判断 ... 如果 comments 的 length 大于 0 ,说明内容里面有评论 .. 这样我们可以用一下 this.setData .. 把得到的 comments 交给页面上的 comments 这个数据 ..

在页面的 data 里面,再添加一个 comments,默认让它等于一个空白的数组 ..

视图

现在内容页面上有了要显示的评论数据,在页面的视图里面,我们可再用一下这些数据 .. 打开内容页面的视图文件 ..

找一个地方,可以去显示评论内容 .. 在 article 里面 .. 这个 article__section 的下面,添加一个 view,上面可以加上一个 comments 类 ..

组件上用一个 wx:if 做一下判断 .. 根据页面 comments 这个数据里 comments.length 属性来决定是不是要显示这个组件 ..

它里面包装一个 view,上面加上 comment 这个类 .. 上面用一个 wx:for ,循环一下页面上的 comments 数据 .. 再用一个 wx:key 设置一下 key 的值,可以使用 item 里的 id 属性 .. 这个 id 属性的值就是每个评论内容的 id 号 ..

这个 comment 组件里面包装的是评论的具体的内容 ..

评论作者的头像,可以放在一个 view 里面,上面加上一个 comment__avatar ..

它里面再包装一个 image 组件 .. 组件上面添加一个 comment__avatar_img .. 它的 src 属性的值是作者头像的地址 .. 绑定一下 item 里的 author_avatar_urls 里面的某个尺寸的头像 .. 比如 48 ..

这里我们可以暂时先把这个内容页面上显示的特色图像隐藏起来 .. 找到这个 featuredMedia ... 上面用一个 wx:if ,把它绑定的值设置成 false ..

然后打开小程序的主样式文件,先去设计一下评论列表里的用户的头像的样式 ..

添加一个 comment__avatar_img ..

width 可以是 24px .. height 也是 24px .. border-radius 设置成 50% .. 再把 margin 设置成 0 ..

跟头像在同一级别这里,再添加一个 view 组件,上面加上 comment__content ..

里面可以显示评论的作者的名字,评论的日期,还有评论的具体内容 .. 一个 text 组件,上面加上 comment__content_author .. 在它里面绑定一个 item.author_name ,它是评论的作者的名字 ..

再用一个 text,上面加上 comment__content_date ,里面绑定一个 item.date .. 它是发布评论的时间 ..

然后是一个 view 组件,里面可以包装显示评论的具体的内容 .. 绑定一个 item.content.rendered ..

评论列表视图《 微信小程序:内容评论 #8 》

统计

11346
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点