关于网站制作,seo如何建立优化网站,wordpress电商推广插件,品牌网络推广评论页面小demo
效果展示 1.拆解组件#xff0c;分层搭建
我们将整个评论页面拆解为三个组件#xff0c;分别是头部导航#xff0c;评论项#xff0c;回复三个部分#xff0c;然后统一在index界面导入 2.头部导航界面搭建 Preview
Component
struct HmNavBar {// 属性分层搭建
我们将整个评论页面拆解为三个组件分别是头部导航评论项回复三个部分然后统一在index界面导入 2.头部导航界面搭建 Preview
Component
struct HmNavBar {// 属性是可以被传递值进行替换的build() {Stack({ alignContent: Alignment.Start }) {Row() {Image($r(sys.media.ohos_ic_compnent_titlebar_back)).width(100%).aspectRatio(1)}.width(24).padding(4).borderRadius(12).backgroundColor(#f5f7f8)Text(评论回复)//先设置占页面的100% 然后在居中对齐.width(100%).textAlign(TextAlign.Center)}.width(100%).padding(20)}
}export { HmNavBar }上述UI界面搭建很简单但要注意一点就是在有了返回按钮的情况下如何让评论回复在整行居中我们可以采用Stack布局或者是在右边也放置一个宽度为24的容器
3.评论项搭建 Preview
Component
struct HmReplay {build() {Row({ space: 8 }) {Image($r(app.media.Cover1)).width(60).borderRadius(30)Column({ space: 5 }) {Text(遇到困难睡大觉).fontSize(18).fontWeight(700)Text(你已经是一个成熟的评论了要学会自己打破零回复).fontSize(18)Row() {Row() {Text(10-21.IP 属地安徽).fontColor(#ffcfcfcf)}Row({ space: 5 }) {Image($r(app.media.love)).width(24).aspectRatio(1)Text(100).fontColor(#ffcfcfcf)}}.width(100%).justifyContent(FlexAlign.SpaceBetween)}.layoutWeight(1).alignItems(HorizontalAlign.Start)}.width(100%).padding(20).height(120).alignItems(VerticalAlign.Top)}
}export { HmReplay }4.评论列表搭建
4.1.1分割线回复 部分 Row() {Text(回复 (7))}.padding(12).border({width: {top: 6},color: rgb(246,246,246)}).width(100%)4.1.2 评论列表
1.导入对应的数据结构
State commentList: ReplyItemModel[] [new ReplyItemModel({id: 1,avatar: https://picx.zhimg.com/027729d02bdf060e24973c3726fea9da_l.jpg?source06d4cd63,author: 偏执狂-妄想家,content: 更何况还分到一个摩洛哥[惊喜],time: 11-30,area: 海南,likeNum: 34,likeFlag: false}),new ReplyItemModel({id: 2,avatar: https://pic1.zhimg.com/v2-5a3f5190369ae59c12bee33abfe0c5cc_xl.jpg?source32738c0c,author: William,content: 当年希腊可是把10发挥到极致了,time: 11-29,area: 北京,likeNum: 58,likeFlag: false}),new ReplyItemModel({id: 3,avatar: https://picx.zhimg.com/v2-e6f4605c16e4378572a96dad7eaaf2b0_l.jpg?source06d4cd63,author: Andy Garcia,content: 欧洲杯其实16队球队打正赛已经差不多24队打正赛意味着正赛阶段在小组赛一样有弱队。,time: 11-28,area: 上海,likeNum: 10,likeFlag: false}),new ReplyItemModel({id: 4,avatar: https://picx.zhimg.com/v2-53e7cf84228e26f419d924c2bf8d5d70_l.jpg?source06d4cd63,author: 正宗好鱼头,content: 确实眼红啊亚洲就没这种球队让中国队刷,time: 11-27,area: 香港,likeNum: 139,likeFlag: false}),new ReplyItemModel({id: 5,avatar: https://pic1.zhimg.com/v2-eeddfaae049df2a407ff37540894c8ce_l.jpg?source06d4cd63,author: 柱子哥,content: 我是支持扩大的亚洲杯欧洲杯扩到32队世界杯扩到64队才是好的世界上有超过200支队伍欧洲区55支队伍亚洲区47支队伍即使如此也就六成出现率,time: 11-27,area: 旧金山,likeNum: 29,likeFlag: false}),new ReplyItemModel({id: 6,avatar: https://picx.zhimg.com/v2-fab3da929232ae911e92bf8137d11f3a_l.jpg?source06d4cd63,author: 飞轩逸,content: 禁止欧洲杯扩军之前应该先禁止世界杯扩军或者至少把亚洲名额一半给欧洲。,time: 11-26,area: 里约,likeNum: 100,likeFlag: false})]
//先定义一个接口 然后可以使用接口转换工具转换成对应的类
export interface ReplyItem {avatar: ResourceStr // 头像author: string // 作者id: number // 评论的idcontent: string // 评论内容time: string // 发表时间area: string // 地区likeNum: number // 点赞数量likeFlag: boolean | null // 当前用户是否点过赞
}export class ReplyItemModel implements ReplyItem {avatar: ResourceStr author: string id: number 0content: string time: string area: string likeNum: number 0likeFlag: boolean | null nullconstructor(model: ReplyItem) {this.avatar model.avatarthis.author model.authorthis.id model.idthis.content model.contentthis.time model.timethis.area model.areathis.likeNum model.likeNumthis.likeFlag model.likeFlag}
}
4.搭建评论列表界面 List() {ForEach(this.commentList, (item: ReplyItemModel) {ListItem() {HmCommentItem({commentInfo: item,//但凡传函数吧必须用箭头函数包裹changeLike:(id:number){this.changeLike(id)}})}})}.layoutWeight(1)这里需要注意几点
List里面必须放置ListItem()评论列表的高度可以给一个自适应这样可以让列列表超出屏幕的高度时实现自适应
5.点赞逻辑的实现
实现任务当我们点击爱心或者点赞的时候点赞数量1爱心变位红色当我们再次点击点赞由原来的点赞变为取消点赞爱心的颜色变为灰色点赞的数量-1
代码层面分析由于我们显示的数据是由主界面传到子界面的所以我们需要在父界面定义一个方法传递到子面去在子界面去调用这个方法所以在子界面需要有一个接受的方法
5.1.1 子界面接收的方法 changeLike:(id:number)void () {}5.1.2 点赞业务逻辑的实现 //点赞逻辑处理changeLike(id:number){//遍历数组 对commentlist数组中的每一个元素item进行迭代const index this.commentList.findIndex(item item.id id)//分支处理主评论和回复评论点赞状态if(index 0){//处理主评论if(this.comment.likeFlag){//已经点赞this.comment.likeNum -- //点赞数量--}else {//未点赞//点赞数量this.comment.likeNum}this.comment.likeFlag !this.comment.likeFlag}else{//处理回复评论 找到回复列表中的某一个子评论//返回第一次匹配元素的数组索引(0~N)if(this.commentList[index].likeFlag){this.commentList[index].likeNum--}else {this.commentList[index].likeNum}this.commentList[index].likeFlag !this.commentList[index].likeFlag//State修饰的数据只能监听到第一层或者本身 需要new一下在使用this.commentList[index] new ReplyItemModel(this.commentList[index])// this.commentList.splice(index,1,this.commentList[index])}
5.1.3父界面进行传值 6.发布界面的搭建
6.1.1 发布的逻辑 publishComment(content:string){this.commentList.unshift(new ReplyItemModel({// id: Math.random()的作用是生成一个基于随机数的临时唯一标识但需注意// 数值范围: 0 ≤ N 1 浮点数// 格式示例: 0.1234567890123456// 非整型: 生成16位小数的浮点数//id不能重复id: Math.random(),avatar: https://picx.zhimg.com/027729d02bdf060e24973c3726fea9da_l.jpg?source06d4cd63,author: 遇到困难睡大觉,content: 山外青山楼外楼,不回消息我记仇,time: 11-30,area: 安徽,likeNum: 0,likeFlag: false}))}6.1.2 发布界面
Preview
Component
struct replay {content: string Linkconmentsnum: numberpublish: (content: string) void () {}build() {Row() {TextInput({ placeholder: 请留下你的评论~, text: $$this.content }).layoutWeight(1).onSubmit(() {this.publish(this.content)this.content })Button(发布).onClick(() {this.publish(this.content)this.content this.conmentsnum})}.width(100%).padding(12)}
}export { replay }
